javascript - JavaScript出现索引错误

当我单击“更改灯”按钮时，我必须单击两次以更改图片。可能出什么问题了？有任何想法吗？

这是我的HTML：

<p>Click the button to change to the next light.</p>

<img id="starting_light" src="green.jpg">

<button type="button" onclick="nextLightClick()">Change</button>

而我的JavaScript：

var gyr = new Array("green.jpg","yellow.jpg","red.jpg");

var index = 0;
var gyrLen = gyr.length;

function nextLightClick() {
    if (index == gyrLen)
        index = 0;

    var image = document.getElementById('starting_light');
    image.src = gyr[index];

    index++;
}

我怀疑主要问题出在JavaScript中，因为一旦我开始弄乱变量，就引入了问题。

最佳答案

第一次运行，图像为绿色。

然后将图像设置为gyr [0]，绿色图像，然后索引递增。

您可以在设置图像之前增加索引，或者重新排列数组以使绿色排在最后。