为什么我的数组总是选择我的数组的数字 2？答案

【问题标题】：why is my array always selects the number 2 of my array?为什么我的数组总是选择我的数组的数字 2？
【发布时间】：2021-04-04 12:31:28
【问题描述】：

我想根据我的数组更改按钮的背景颜色，但是当我按下按钮时，它只是将其颜色更改为“紫色”...这是我的代码。

let i = 0;
let colors = ['red','blue','purple'];
let button = document.getElementById('change-color');

function changeColor() {
  for(i=0; i < colors.length; i++){
    button.style.backgroundColor = colors[i]; 
  };
};

【问题讨论】：

您希望它循环显示所有颜色吗？
正如@NickParsons 已经问过的，您想要实现什么/您的期望是什么？
它将始终选择 2，因为您循环遍历数组并且您没有给出任何条件（if 语句），因此循环到达末尾并停止。请告诉我们你想要发生什么。每次点击按钮都会改变背景颜色？

标签： javascript arrays colors addeventlistener

【解决方案1】：

因为每次点击都会循环整个数组。相反，只需单击一次即可更改背景颜色：

let i = 0;
let colors = ['red','blue','purple'];
let button = document.getElementById('change-color');

function changeColor(){
    button.style.backgroundColor = colors[i];
    i = (i + 1) % colors.length;
}

旁注：i = (i + 1) % colors.length 代码将一个添加到i，因此它会移动到下一次单击的下一个颜色，并在到达colors 数组的末尾时返回到0 .所以i 中的值将是0（初始值），然后是1，然后是2，然后又是0，因为(2 + 1) % colors.length 是3 % 3，即0。

【讨论】：

@BryanGabay - 不，不是。 i + 1 保持 i 不变。 i++ 更改 i。如果你想使用++，你可以将上面的代码重写为button.style.backgroundColor = colors[i]++; i = i % colors.length;。（您可以在更新表达式中使用 ++I，如下所示：i = ++i % colors.length，但这会非常误导，因为您更新 i 只是为了通过 = 丢弃该更新而是。

【解决方案2】：

您的浏览器只有在完成运行for 循环后才会执行渲染步骤。因此，您的浏览器只会在您的 for 循环完成后显示对按钮背景颜色所做的更改，因此会显示 for 循环迭代的最后一种颜色（即：紫色）。相反，您可以使用setTimeout()，它将每 1000 毫秒将多个任务排队，这将使您的浏览器有机会运行其渲染步骤：

let i = 0;
let colors = ['red', 'blue', 'purple'];
let button = document.getElementById('change-color');
button.addEventListener("click", changeColor);
function changeColor() {
  if(i !== colors.length) {
    button.style.backgroundColor = colors[i];
    setTimeout(changeColor, 1000);
    i++;
  } 
}

&lt;button id="change-color"&gt;Click me&lt;/button&gt;

【讨论】：

感谢您的回答，但我真的不明白.. 我应该回到 for 循环吗？或者有什么我可以回顾的主题？
@BryanGabay 我建议你看看this video，如果你不知道 setTimeout 是如何工作的，那么你可以看看它是如何工作的。您不能只使用 for 循环（即，如果您尝试循环显示颜色并显示更改），您需要让 JS 引擎有机会呈现对屏幕所做的更改，即setTimeout 允许我们做什么（它还允许我们像 for 循环一样通过一遍又一遍地递归调用相同的函数来“迭代”）
我尝试删除 setTimeOut，因为它只会自行改变颜色。现在我可以与我的按钮进行交互，但我观察到的是，当我到达蓝色并再次按下按钮时，它从红色变为紫色如此之快......
@BryanGabay 你能澄清一下你想要达到的目标吗？您是希望每次单击时颜色都会改变，还是希望颜色自行改变？
每次点击

【解决方案3】：

您的代码将数组遍历到最后，因此自然会选择最新的项目。事实上，您的按钮颜色变化如此之快 3 次，以至于您认为它只更改了一次。

我认为循环不是您想要的，如果您想自己选择颜色，则需要将参数传递给函数。如果是随机颜色，您可以使用随机数生成器作为数组索引。

【讨论】：