JavaScript和html交通灯不工作

所以红色交通灯出现，然后当按下下一个灯光按钮时灯光不会改变，我不能为我的生活找出原因。我将不胜感激任何帮助。这里的代码：JavaScript和html交通灯不工作

<!DOCTYPE html> 
<html> 
    <body> 

    <img id="thestartlight" src="file:\\\C:\Users\Sony\Desktop\Amul's USB\IT\it test\traffic-light-red.jpg"> 

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

    <script> 
     var list = [ 
     "file:\\\C:\Users\Sony\Desktop\Amul's USB\IT\it test\traffic-light-red.jpg.html" 
     "file:\\\C:\Users\Sony\Desktop\Amul's USB\IT\it test\traffic-light-amber.jpg", 
     "file:\\\C:\Users\Sony\Desktop\Amul's USB\IT\it test\traffic-light-green.jpg", 
     "file:\\\C:\Users\Sony\Desktop\Amul's USB\IT\it test\traffic-light-red.jpg" 
     ]; 

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

     function nextLightClick() { 
     index++; 

     if (index == lightsLen) 
      index = 0; 

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

来源

2016-11-30 devjyot kainda

拼写。 'var list'！='lights' – BenG

你的意思是'list.length'吗？而不是'lights.length'或它总是0，就像本刚刚说的:) –

你也有语法错误，看看你的控制台有错误 –

有3个问题。

1）它是list必须lights

2）最好把图像相对images/lights/文件夹到你的代码文件夹。

3）HTML文件不能在图片标签中显示

这里是修复：

var lights = [ 
    "images/lights/amber.jpg", 
    "images/lights/green.jpg", 
    "images/lights/red.jpg" 
]; 
var index = 0; 
var lightsLen = lights.length;

来源

2016-11-30 20:30:32 num8er

这是一个错字..

var list = [ ...

应该

var lights [ ...

来源

2016-11-30 20:30:56

您将数组命名为list，但您正在寻找lights的图片。

您还需要从阵列中删除.html文件。

var image = document.getElementById('thestartlight'); 
 

 

 
var lights = [ 
 
"http://archive.nassaucountyny.gov/agencies/TPVA/Images/RedLight-2_145x193.jpg", 
 
"http://www.clker.com/cliparts/2/1/1/6/N/W/amber-traffic-light.svg", 
 
"http://www.clker.com/cliparts/6/e/9/d/11949849761176136192traffic_light_green_dan__01.svg" 
 
]; 
 

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

 
function nextLightClick() { 
 
    index++; 
 

 
    if (index == lightsLen){ 
 
     index = 0; 
 
    } 
 

 
    image.src = lights[index]; 
 
}

img {width:50px;}

<img id="thestartlight" src="http://archive.nassaucountyny.gov/agencies/TPVA/Images/RedLight-2_145x193.jpg"> 
 

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

来源

2016-11-30 20:31:47

JavaScript和html交通灯不工作

回答

相关问题