JS循环使用问题：点击按钮循环切换div背景色时报i未声明错误

报错原因 #

你收到的assignment to undeclared variable i报错，是因为for循环中的计数器i没有用let/var/const显式声明，直接赋值i = 0触发了未声明变量赋值的规则。

另外你当前的代码逻辑也无法实现「每次点击按顺序切换背景色」的需求：

• for循环会在单次点击内直接遍历完整个数组，最终selectColor永远是数组最后一项orange
• selectColor是在for循环块级作用域内声明的变量，循环外无法访问，即使修复了i的声明问题，也会额外抛出变量未定义的报错

修复后可运行代码 #

let colors = ["blue", "yellow", "green", "brown", "orange"];
let btn = document.getElementById("btn");
// 全局存储当前颜色对应的数组索引
let currentColorIndex = 0;

btn.addEventListener("click", function () {
  let container = document.getElementById("container");
  // 取当前索引对应的颜色设置背景
  container.style.backgroundColor = colors[currentColorIndex];
  // 索引自增，超出数组长度时自动回到0，实现循环遍历
  currentColorIndex = (currentColorIndex + 1) % colors.length;
});

核心修改点 #

• 所有变量都用let显式声明，消除未声明变量的报错
• 移除不必要的for循环，改用全局索引变量记录当前使用的颜色位置，每次点击仅读取一次数组值
• 通过取余运算实现索引超过数组长度后自动归零，满足循环顺序切换颜色的需求

内容的提问来源于stack exchange，提问作者TomDev