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;
    }
})

P.S。我也尝试过：background.style.backgroundColor = colors [i]; （不添加索引变量）。我仍然只得到最后一种颜色，黄色。

Answer 1

为什么“ for”循环仅返回数组中的最后一项？

因为您告诉它这样做。您在点击监听器中使用的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

执行循环时，请先放入“黑色”，然后放入“蓝色”，依此类推。最后放“黄色”。 colors数组的每个放置的元素都替换了前一个元素，因此您最后看到的是“黄色”。如果要从阵列轮胎中获得随机颜色，请执行以下操作：

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>

为什么“ for”循环仅返回数组中的最后一项？

5 个答案: