为什么我的红绿灯代码不起作用？答案

【问题标题】：Why is my Traffic Light code not working?为什么我的红绿灯代码不起作用？
【发布时间】：2017-04-28 21:47:55
【问题描述】：

我已经完成了课程作业；这是出于实验目的。

我正在尝试创建一个成功的红绿灯序列。但是，当我单击按钮时，序列的第一个图像保持不变。

为什么它不起作用？

<!DOCTYPE html> 
<html> 
<body>  
<h1>Traffic Lights Task 3 JavaScript Controlled Assesment 2017</h1> 
<p>This is  my Traffic Light script</p> 

<img id="Traffic_Lights" src="RED.png">
<button type="button" onclick="changeTraffic_Lights()">Change 
Lights</button>  

<script> 

    var image = []
    image[0] = "RED.png";
    image[1] = "AMBERRED.png";
    image[2] = "GREEN.png";
    image[3] = "AMBER.png";

    function changeTraffic_Lights() {

    var Traffic_Light_Sequence = document.getElementById('Traffic_Lights');

      if (Traffic_Light_Sequence.src == "RED.png") {
      Traffic_Light_Sequence.src = image[1];
    } else if (Traffic_Light_Sequence.src == "AMBERRED.png") { 
      Traffic_Light_Sequence.src = image[2];
    } else if (Traffic_Light_Sequence.src == "GREEN.png") {
       Traffic_Light_Sequence.src = image[3]
    } else {
      Traffic_Light_Sequence.src = image[0]

     }
     }

  </script>  
</body> 
</html>

【问题讨论】：

标签： javascript html arrays

【解决方案1】：

你有两个错误：

1) 需要把脚本放在头部，否则onclick函数不会提前知道函数。

2) Traffic_Light_Sequence.src 返回完整路径，因此您需要在示例中使用完整路径。但是，更好的方法是使用占位符变量。例如，定义一个名为“light_state”或其他东西的新变量，并使用其值 0,1,2,3 来确定更改图像的逻辑。

【讨论】：