Question

我完成了课程;这是出于实验目的。

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

为什么不起作用？

<!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>

Answer 1

你有两个错误：

1）您需要将脚本放在标题中，否则onclick函数不会提前知道该函数。

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

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

1 个答案: