为什么"for"循环只返回数组中的最后一项？

Question

我是JavaScript的新手，每天都在做简单的练习。你能解释一下为什么我的for循环只返回数组中的最后一个项吗？提前感谢！代码为：

let button = document.querySelector ('.button');
let background = document.querySelector ('body');
let colors = ['black', 'blue', 'green', 'white', 'brown', 'yellow'];

button.addEventListener ('click', function(){
for (let i= 0; i< colors.length; i++) {
let index = colors [i];
background.style.backgroundColor = index;
}
})

附言：我也试过：background.style.backgroundColor=colors[I]；(不添加索引变量(。但我只得到最后一种颜色，那就是黄色。

Answer 1

为什么'for'循环只返回数组中的最后一项？

因为你告诉它这样做。你在click监听器中使用的for循环将始终运行，直到它达到数组的长度(i < colours.length(，这意味着最新的元素；我想你会尝试在每次点击时改变背景，而for不是一个合适的工具，你只需要每次点击时增加一些"索引"，并从颜色数组中读取该"索引"的颜色；

let button = document.querySelector ('.button');
let background = document.querySelector ('body');
let colors = ['black', 'blue', 'green', 'white', 'brown', 'yellow'];
let colorIndex = 0;
button.addEventListener ('click', function(){
background.style.backgroundColor = colors [colorIndex % colors.length];
colorIndex++
})

<button class="button">change bg</button>

Answer 2

据我所知，您希望在单击按钮时更改元素的颜色。当你点击时，你的for循环会改变背景，但它会发生得很快，你将看不到。使用此代码，您可以在每次单击后通过在colors数组中拾取下一个值来更改颜色。代码：

let button = document.querySelector('.button');
let background = document.querySelector('body');
let colors = ['black', 'blue', 'green', 'white', 'brown', 'yellow'];
let cIndex = 0;
button.addEventListener('click', function () {
background.style.backgroundColor = colors[cIndex];
if (cIndex >= colors.length - 1) {
cIndex = 0;
} else {
cIndex++;
}
});

说明-首先我们创建一个cIndex变量，从数组的开头开始。然后，每次单击按钮时，cIndex都会递增，以在下次单击按钮时获得数组中的下一个值。然后我们用if语句检查是否到达了数组的末尾。如果我们到达数组的末尾，我们将cIndex等于零，返回到数组中的第一个值。

Answer 3

您应该将当前索引的值放入闭包中，如下所示：

let button = document.querySelector ('.button');
let background = document.querySelector ('body');
let colors = ['black', 'blue', 'green', 'white', 'brown', 'yellow'];
let index = 0;
button.addEventListener ('click', function(){
const _index = index++;
background.style.backgroundColor = colors[_index];
if (index === colors.length) {
index = 0;
}
})

Answer 4

执行循环时，先放"黑色"，然后放"蓝色"，依此类推。最后放"黄色"。颜色数组中每个放置的元素都会替换上一个元素，所以您最后一次看到的是"黄色"。如果你想从你的阵列中获得随机颜色，那么这个：

let button = document.querySelector ('.button');
let background = document.querySelector ('body');
let colors = ['black', 'blue', 'green', 'white', 'brown', 'yellow'];
button.addEventListener ('click', function(){
let r = Math.floor(Math.random() * colors.length) + 0;
background.style.backgroundColor = colors[r];
});

点击此处阅读更多信息：https://www.w3schools.com/js/js_random.asp

Answer 5

与ES7代码的答案相同

const delay  = ms => new Promise(res=>setTimeout(res,ms))
,   colors = ['orange', 'blue', 'green', 'pink', 'crimson', 'yellow']
;
document.querySelector('#button-loop').onclick = async ()=>
{
for (let color of colors)
{
document.body.style.backgroundColor = color
await delay(1500)  // slow down colors changing
}
}

let colorId = -1
document.querySelector('#button-next').onclick = () =>
{
colorId = ++colorId % colors.length
document.body.style.backgroundColor = colors[colorId]
}

<button id="button-loop">color loop</button>
<button id="button-next">color next</button>