咨询：点击页面切换h1标签背景色的代码实现问题

嘿，我看了你写的代码，发现两个小问题会导致功能不符合预期，我来帮你调整一下：

• 数组索引越界问题：你的for循环用了b <= colors.length的条件，但数组的索引是从0开始的，colors数组有3个元素，最大有效索引是2。当b等于3时，colors[3]是undefined，这会让h1的背景色变成无效值，相当于没设置。
• 循环逻辑冗余：就算循环条件没问题，每次点击都会把所有颜色挨个设置一遍，最后h1只会显示数组里的最后一个颜色，根本达不到“点击一次换一个颜色”的效果。

下面给你两种可行的实现方案：

方案一：按顺序循环切换颜色 #

我们用一个全局变量记录当前选中的颜色索引，每次点击就切换到下一个，到数组末尾就回到开头：

// 全局变量记录当前颜色的索引，初始为0
let currentColorIdx = 0;

document.addEventListener('click', func);

function func() {
  const mainHeading = document.querySelector('h1');
  const colors = ['cyan', 'black', 'brown'];
  
  // 设置当前索引对应的背景色
  mainHeading.style.backgroundColor = colors[currentColorIdx];
  
  // 更新索引，用取余操作实现循环
  currentColorIdx = (currentColorIdx + 1) % colors.length;
}

方案二：每次点击随机切换颜色 #

如果不需要按固定顺序，想每次随机选一个颜色，可以这样写：

document.addEventListener('click', func);

function func() {
  const mainHeading = document.querySelector('h1');
  const colors = ['cyan', 'black', 'brown'];
  
  // 生成0到数组长度-1之间的随机整数
  const randomIdx = Math.floor(Math.random() * colors.length);
  mainHeading.style.backgroundColor = colors[randomIdx];
}

这样修改后，每次点击页面任意位置，h1的背景色就会正常切换啦～

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