Javascript list[nextlight]在此代码中做什么？_Javascript

Javascript list[nextlight]在此代码中做什么？

javascript

Javascript list[nextlight]在此代码中做什么？,javascript,Javascript,我在这段代码上工作了几个星期，我向我的老师寻求帮助，他添加了这一行firstlight.src=list[nextlight]这使所有的工作。他向我解释了，但我没有解释；我不明白这一点以及它是如何运作的。有人能给我解释一下为什么我们将源图像与列表[nextlight]相等吗我的代码： <!DOCTYPE html> <html> <body> <h1>JavaScript Code</h1> <p>Tr

我在这段代码上工作了几个星期，我向我的老师寻求帮助，他添加了这一行

firstlight.src=list[nextlight]这使所有的工作。他向我解释了，但我没有解释；我不明白这一点以及它是如何运作的。有人能给我解释一下为什么我们将源图像与列表[nextlight]相等吗
我的代码：
<!DOCTYPE html> 
<html> 
<body>  

  <h1>JavaScript Code</h1> 
  <p>Traffic Light</p> 

<img id="traffic" src="only red1.jpg">
  <button type="button" onclick="ChangeLight()">Change Light</button>  



  <script> 
    var list = ["only red1.jpg","red-yellow 2.jpg", "green3.jpg","yellowonly4.jpg"];
    var nextlight = 0;
    function ChangeLight() {
      nextlight = nextlight + 1;      
      if (nextlight == list.length) 
        nextlight = 0;      
      var firstlight = document.getElementById('traffic');     
      firstlight.src = list[nextlight]; 
    } 
  </script>  
</body> 
</html>   


JavaScript代码
交通灯
变光
var list=[“仅限red1.jpg”、“红黄2.jpg”、“绿3.jpg”、“仅限黄4.jpg”]；
var nextlight=0；
函数ChangeLight（）{
nextlight=nextlight+1；
if（nextlight==list.length）
nextlight=0；
var firstlight=document.getElementById（'traffic'）；
firstlight.src=list[nextlight]；
} 
有一个名为nextLight
的全局变量，它等于0
。单击按钮后，该函数会增加该数字，因此下一个灯光<代码>为<代码>1

然后检查新数字是否等于列表的长度。如果相等，则表示应再次选择第一个图像

为什么?？因为JavaScipt中的数组有一个0基索引，这意味着由4个元素组成的数组的长度为4，但最后一个索引

，因为它从0,1,2,3开始

然后，每次点击它都会更改图像的

src

（

firstlight.src=list[nextlight]

），每个url位于

list[0]

，

list[1]

，

list[2]

，

list[3]

，当它到达索引4时，它会再次重置为

list[0]

。

firstlight.src = list[nextlight];

将image元素的src属性设置为列表中的下一个图像。它实际上相当于

<img id="traffic" src="only red1.jpg"/> <!-- after the first click -->
<img id="traffic" src="red-yellow 2.jpg" /> <!-- after the second click -->
<!-- and so on.. -->

希望这有帮助

到底是什么让你困惑？您知道

nextlight

的值是多少吗？在数组中建立索引的作用是什么？当您执行此代码时，light行为告诉您什么？灯按什么顺序亮？这与

列表中的项目有什么关系？如果你想一想这些事情，你可以自己弄清楚发生了什么。那么list[nextlight]就像我的数组中的一个循环？@Joseph.JJ它充当循环中的当前位置
list[0] == "only red1.jpg", list[1] == "red-yellow 2.jpg", // and so on because..
nextlight == 0,             nextlight == 1