试图理解 JS 循环

Question

我正在努力理解 JS 循环。 我找到了一个在线教程，用于更改 div id="container" 的随机颜色的按钮。然而，事实证明，随机颜色在单击后经常重复。我想更改代码并逐个循环遍历数组颜色，并在每次单击后更改 div#container 的颜色。这是我的代码：

let colors = ["blue", "yellow", "green", "brown", "orange"];
let btn = document.getElementById("btn");

btn.addEventListener("click", function () {
  let container = document.getElementById("container");
  for (i = 0; i < colors.length; i++) {
    let selectColor = colors[i];
  }

  container.style.backgroundColor = selectColor;
});

我收到错误：分配给未声明的变量 i。有人可以帮帮我吗？

Answer 1

您一次循环遍历数组中的所有颜色，然后只使用最后一种来设置背景色。

你应该只增加一，然后设置颜色

let colors = ["blue", "yellow", "green", "brown", "orange"];
let btn = document.getElementById("btn");
let i = 0;
let container = document.getElementById("container");

btn.addEventListener("click", function () {
  i++;
  if(i >= colors.length) i = 0;
  container.style.backgroundColor = colors[i];
});

Answer 2

你需要在第 6 行声明变量 i，所以不是

  for (i = 0; i < colors.length; i++) {
    let selectColor = colors[i];
  }

你会的

  for (let i = 0; i < colors.length; i++) {
    let selectColor = colors[i];
  }

Answer 3

你错过了在 for 循环中声明“i”。

for(let i = 0; i < colors.length; i++) {
    let selectColor = colors[i];
}

Answer 4

只是为了补充 Kokodoko 的答案：您不需要循环，因为您需要做的就是在单击按钮时一个接一个地循环遍历数组索引，而不是一次循环所有颜色。

这是一种稍微不同的方法，它不依赖数组索引作为全局变量。相反，它会向侦听器返回一个函数（闭包），该函数在调用时会从一种颜色变为另一种颜色。

const colors = ['blue', 'yellow', 'green', 'brown', 'orange'];

const container = document.getElementById('container');
const btn = document.getElementById('btn');

// We call the function which returns a new function
// which is what the button calls
btn.addEventListener('click', handleClick(), false);

// Initially set `index` to 0
function handleClick(index = 0) {

  // This is the function the listener will call
  return function() {

    // Set the BG colour to the new index
    // if the index hasn't reached the end of the array
    // otherwise set it to zero, and start again.
    if (index < colors.length - 1) {
      container.style.backgroundColor = colors[index++];
    } else {
      index = 0;
    }
  }

}

#container {
  width: 100px, height: 100px;
}

<button id="btn">Click</button>
<div id="container">Container</div>