Question

我被要求制作一个红绿灯序列，但我不知道我工作中的错误是什么。当我点击按钮时，没有任何图像会切换，我不太确定我做错了什么。它只停留在默认的红绿灯图像上。代码是：

<!DOCTYPE html> 
<html>
<body>

<h1> <u> T</u></h1>

<img id="Lights" src="TrafficLights.png" alt="Traffic Lights" width="600" height ="500"> 

<button onclick="ChangeLights()">Switch lights</button> 

<script>
var TrafficLights = new array();
var TrafficLights = ["TrafficLights.png", "RedLights.png", "YellowLights.png", "GreenLights.png"]
var index = 0;
    function ChangeLights() {
        index = index + 1;
        if (index == TrafficLights.length)
            index = 0;
    document.getElementById("Lights").src = TrafficLights[index];
    }

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

Answer 1

var TrafficLights = new array();

此行导致所有错误。删除它，一切都应该工作。

您不需要此行，因为下一行是：

var TrafficLights = ["TrafficLights.png", "RedLights.png", "YellowLights.png", "GreenLights.png"]

这声明并将TrafficLights定义为一个数组，不需要前一行。

注意：如果您想制作一个空白数组，请执行var TrafficLights = [];（首选）或var TrafficLights = new Array;（请注意大写字母'A'）。

Answer 2

这是一个有趣的问题。因此，分配new array()作业有一个例外，因为array不是有效的，如前面的答案所示：

var TrafficLights = new array();
VM276:1 Uncaught ReferenceError: array is not defined
    at <anonymous>:1:25

可以假设这个错误下面的代码没有得到评估......

...但是，点击按钮实际上会正确调用ChangeLights函数，这会产生不同的错误：

VM81:66 Uncaught TypeError: Cannot read property 'length' of undefined
at ChangeLights (VM81:66)
at HTMLButtonElement.onclick (VM83:56)

因此ChangeLights函数被声明，而TrafficLights则没有。那是为什么？

我认为这是因为TrafficLights变量由于第一个错误而永远不会被声明，但该函数可用，因为在第一个异常被抛出之前它是Draggable ！

交通灯序列Javascript

2 个答案: