Javascript светофор массива

-1

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<img id="H:\IT\traffic-light-red.jpg" src="H:\IT\traffic-light-red.jpg"> 
 

 
<button type="button" onclick="changeLights()">Change Lights</button> 
 

 
<script> 
 
var list = [ 
 
    "H:\IT\traffic-light-red.jpg", 
 
    "H:\IT\traffic-light-red-amber.jpg", 
 
    "H:\IT\traffic-light-green.jpg", 
 
    "H:\IT\traffic-light-red.jpg" 
 
]; 
 

 
var index = 0; 
 

 
function changeLights() { 
 
    index = index + 1; 
 

 
    if (index == list.length) index = 0; 
 

 
    var image = document.getElementById('light'); 
 
    image.src=list[index]; 
 
} 
 
</script> 
 

 
</body> 
 
</html>

Я не понимаю, почему этот код не работает. каждый раз, когда я пытаюсь открыть его в браузере, он не показывает мне изображение. это то, что я изо всех сил стараюсь делать в школе, и оценил бы, что кто-то может указать мне в правильном направлении.

источник

2016-11-10 devjyot kainda

Ваши изображения в файловой системе? Браузер не может получить доступ к вашему списку файловой системы. Сначала поставьте их на http-сервере. Во-вторых, ваши идентификаторы изображений и getElementById не совпадают ... удачи! – spooky

У вас нет элемента с 'id'' 'light''. –

Вы не выбрали правильно свое изображение.

Все, что вам нужно, это изменение идентификатора вашего элемента img;

var list = [ 
 
    "https://cdn0.iconfinder.com/data/icons/customicondesign-office6-shadow/256/trafficlight-red.png", 
 
    "https://pixabay.com/static/uploads/photo/2012/05/07/04/43/button-47963_640.png", 
 
    "https://cdn0.iconfinder.com/data/icons/customicondesign-office6-shadow/128/trafficlight-green.png" 
 
]; 
 

 
var index = 0; 
 

 
function changeLights() { 
 
    index = index + 1; 
 

 
    if (index == list.length) index = 0; 
 

 
    var image = document.getElementById('light'); 
 
    image.src=list[index]; 
 
}

<img id="light" src="https://cdn0.iconfinder.com/data/icons/customicondesign-office6-shadow/256/trafficlight-red.png" width="100" height="100"> 
 
<button type="button" onclick="changeLights()">Change Lights</button>

В этом фрагменте изображений, размещенных от других веб-сайтах или КДС. Кроме того, ваши пути изображения выглядят неправильно. Проверьте пути изображения.

источник

2016-11-10 19:48:39 oguzhancerit

Если вы поместите «H: \ IT \ traffic-light-red.jpg» в адресную строку браузера, это сработает? Неа! потому что он пытается получить доступ к изображению в файловой системе. Вам необходимо использовать file protocol. Так что это будет что-то вроде:

<!DOCTYPE html> 
<html> 
<body> 

<img id="H:\IT\traffic-light-red.jpg" src="H:\IT\traffic-light-red.jpg"> 

<button type="button" onclick="changeLights()">Change Lights</button> 

<script> 
var list = [ 
    "file:///H:/IT/traffic-light-red.jpg.html" 
    "file:///H:/IT/traffic-light-red-amber.jpg", 
    "file:///H:/IT/traffic-light-green.jpg", 
    "file:///H:/IT/traffic-light-red.jpg" 
]; 

var index = 0; 

function changeLights() { 
    index = index + 1; 

    if (index == list.length) index = 0; 

    var image = document.getElementById('light'); 
    image.src=list[index]; 
} 
</script> 

</body> 
</html>

Если файлы были размещены где-то в Интернете, как Dropbox вы можете также захватить эти ссылки и она будет работать.

источник

2016-11-10 19:54:42

ваш источник изображений неверно место ваших изображений вблизи вашего HTML-файл в корневом каталоге вашего проекта, а затем использовать что-то подобное для ваших источников: <img src="image_url" />

вашего идентификатор вашего Img элементов не совпадает с getElementById метод

источник

2016-11-10 19:57:39 farhadamjady

Это то, что я использовал, надеюсь, что это поможет!

<html> 
 
<head> 
 
<b> <u> <i>Traffic Light System</i> </u> </b> 
 
</head> 
 
<body> 
 

 
<p>Click the button to change to the next light.</p> 
 

 
<img id="starting_light" src="http://mars.wiwi.hu-berlin.de/mediawiki/sk/images/thumb/1/1f/Red_Light_Icon.svg/232px-Red_Light_Icon.svg.png"> 
 

 
<button type="button" onclick="nextLightClick()">Next Light</button> 
 

 
<script> 
 

 
var lights = new Array("http://mars.wiwi.hu-berlin.de/mediawiki/sk/images/thumb/1/1f/Red_Light_Icon.svg/232px-Red_Light_Icon.svg.png","https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Yellow_Light_Icon.svg/232px-Yellow_Light_Icon.svg.png","https://upload.wikimedia.org/wikipedia/commons/4/4b/Green_Light_Icon.svg"); 
 

 

 

 
var index = 0; 
 
var lightsLen = lights.length; 
 

 
function nextLightClick() { 
 
    index++; 
 

 
    if (index == lightsLen) 
 
     index = 0; 
 

 
    var image = document.getElementById('starting_light'); 
 
    image.src = lights[index]; 
 
} 
 
</script> 
 

 
</body> 
 
</html>

источник

2016-11-15 14:53:20 adambunce123

ответ

Смежные вопросы