时间戳

首页 > 解决方案 > 试图理解 JS 循环

javascript - 试图理解 JS 循环

问题描述

我正在努力理解 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。有人可以帮我吗？

标签： javascript

解决方案

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

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

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

推荐阅读