带有索引错误的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中存在主要问题，因为一旦我开始处理变量，问题就出现了。

第一次单击按钮时，

index

等于0，因此

nextLightClick（）

将image.src设置为“green.jpg”，这是相同的（假设“1green.jpg”是一个打字错误）作为起始图像

---

解决方案是，第一次单击按钮时，将

index++

移动到

nextLightClick（）

的第一行，

index

等于0，因此

nextLightClick（）

将image.src设置为“green.jpg”，这与起始图像相同（假设“1green.jpg”是一个输入错误）

---

解决方案是将

index++

移动到

nextLightClick（）

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

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

---

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

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

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

---

您可以在设置图像之前增加索引，也可以将数组重新排序为最后一个绿色。

第一次输入函数并设置图像时，索引仍然为0

移动索引++；，或将索引初始化为值1

var index = 1;

---

如果要将索引初始化为1，则应将变量重命名为nextIndex。

第一次输入函数并设置图像时，索引仍为0

移动索引++；，或将索引初始化为值1

var index = 1;

---

如果您想将索引初始化为1，那么您应该将变量重命名为nextIndex之类的名称。

我认为情况并非如此。 您的代码工作正常。您的第一个图像是绿色的，当您第一次单击时，您将用第一个图像替换它，这就是您看不到任何差异的原因

你可以考虑做为< /P>

var gyr=新数组（“http://i.imgur.com/eucAMTA.jpg", "http://is2.mzstatic.com/image/thumb/Purple122/v4/be/9a/f0/be9af074-90f2-5894-99a0-17460783db6c/source/1200x630bf.jpg", "https://i0.wp.com/fusion.net/wp-content/uploads/2016/05/RED.jpg?resize=1600%2C900&quality=80&strip=all");
var指数=0；
var gyrLen=旋转长度；
函数nextLightClick（）{
索引++；
//警报（“你好”+索引）；
如果（索引==gyrLen）
指数=0；
var image=document.getElementById（'starting_light'）；
image.src=gyr[index]；
}

img{
宽度：200px；
高度：200px；
}

p>单击按钮以切换到下一个灯光

改变

我认为情况并非如此。 您的代码工作正常。您的第一个图像是绿色的，当您第一次单击时，您将用第一个图像替换它，这就是您看不到任何差异的原因

你可以考虑做为< /P>

var gyr=新数组（“http://i.imgur.com/eucAMTA.jpg", "http://is2.mzstatic.com/image/thumb/Purple122/v4/be/9a/f0/be9af074-90f2-5894-99a0-17460783db6c/source/1200x630bf.jpg", "https://i0.wp.com/fusion.net/wp-content/uploads/2016/05/RED.jpg?resize=1600%2C900&quality=80&strip=all");
var指数=0；
var gyrLen=旋转长度；
函数nextLightClick（）{
索引++；
//警报（“你好”+索引）；
如果（索引==gyrLen）
指数=0；
var image=document.getElementById（'starting_light'）；
image.src=gyr[index]；
}

img{
宽度：200px；
高度：200px；
}

p>单击按钮以切换到下一个灯光

更改

啊，多亏了Zac和American，我似乎找到了答案。问题是索引应该位于“下一步单击”的第一行

固定脚本如下：

单击按钮以切换到下一个灯光

换灯
var gyr=新数组（“green.jpg”、“yellow.jpg”、“red.jpg”）；
var指数=0；
var gyrLen=旋转长度；
函数nextLightClick（）{
索引++；
如果（索引==gyrLen）
指数=0；
var image=document.getElementById（'starting_light'）；
image.src=gyr[index]；
}

啊，多亏了Zac和American，我似乎找到了答案。问题是索引应该位于“下一步点击”的第一行

固定脚本如下：

单击按钮以切换到下一个灯光

换灯
var gyr=新数组（“green.jpg”、“yellow.jpg”、“red.jpg”）；
var指数=0；
var gyrLen=旋转长度；
函数nextLightClick（）{
索引++；
如果（索引==gyrLen）
指数=0；
var image=document.getElementById（'starting_light'）；
image.src=gyr[index]；
}

索引的更新逻辑有点问题。您必须计算它的值，如果它小于

gry.length

则添加一个值，然后重新初始化为0

内部脚本代码：

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

function nextLightClick() {
    index = index + 1 < gyr.length ? index + 1 : 0;
    document.getElementById('starting_light').alt = gyr[index];
}

var-gyr=新数组（“green.jpg”、“yellow.jpg”、“red.jpg”）；
var指数=0；
函数nextLightClick（）{
指数=指数+1

索引的更新逻辑有点问题。您必须计算它的值，如果它小于

gry.length

则添加一个值，然后重新初始化为0

内部脚本代码：

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

function nextLightClick() {
    index = index + 1 < gyr.length ? index + 1 : 0;
    document.getElementById('starting_light').alt = gyr[index];
}

var-gyr=新数组（“green.jpg”、“yellow.jpg”、“red.jpg”）；
var指数=0；
函数nextLightClick（）{
指数=指数+1

只需将index++移到函数的第一行。@apsillers这是我在实际代码中的错误，它们是相同的，我编辑了它以修复它，Zac I