JavaScript 出现索引错误

Question

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

这是我的 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 中，因为一旦我开始摆弄变量，问题就出现了。

Answer 1

第一次运行时，图像是绿色的。

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

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