为何事件监听器中for循环生效而forEach循环不生效？附修正方案

for循环和forEach循环的核心差异 #

你这里的问题本质是两个循环的执行逻辑完全不同：

• 你的for循环是固定执行6次，刚好对应Hex颜色需要的6位字符，生成的是符合规范的#+6位颜色值，所以能正常生效。
• 而你写的hex.forEach(...)是遍历整个hex数组——这个数组有16个元素（0-9加A-F），会执行16次，生成#+16位的无效颜色值，浏览器无法识别，自然不会改变背景色。
  另外还有个隐藏问题：color = document.querySelectorAll('.color')返回的是NodeList集合，不能直接用color.textContent赋值，必须遍历每个元素单独设置。

正确的forEach写法 #

如果你想用forEach实现和原for循环一致的效果，需要创建一个长度为6的数组来遍历（模拟6次循环），同时修正color的赋值逻辑：

const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
const btn = document.getElementById("btn");
const colorElements = document.querySelectorAll('.color');

btn.addEventListener("click", () => {
  let hexColor = "#";
  // 创建长度为6的数组，用forEach执行6次循环
  Array.from({length: 6}).forEach(() => {
    // 替换成随机取hex数组元素，原代码固定取hex[11]只会生成#BBBBBB
    const randomIndex = Math.floor(Math.random() * hex.length);
    hexColor += hex[randomIndex];
  });
  
  // 遍历所有.color元素设置文本内容
  colorElements.forEach(el => {
    el.textContent = hexColor;
  });
  document.body.style.backgroundColor = hexColor;
});

额外优化提示 #

原代码里的hexColor += hex[11]是固定取hex数组的第12个元素（值为"B"），所以不管点击多少次都是#BBBBBB，上面的代码改成随机取数组元素，才是真正的随机Hex颜色切换功能。

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