JS实现网格单元格Hover随机背景色失效问题求助

你的核心问题是**randomBgColor函数没有返回生成的RGB颜色值**——你只在函数里用console.log输出了颜色值，但没把它return出来。当你写element.style.backgroundColor = randomBgColor();时，实际上是把undefined赋值给了背景色，自然看不到任何变化，原本的黑色功能也因此失效。

除此之外，代码还有几个可以优化的坑点，一起给你修正：

修改后的完整代码 #

document.addEventListener("DOMContentLoaded", function() {
  const button = document.createElement("button");
  document.body.prepend(button);
  button.textContent = "press me to set grid size";
  const myGrid = document.querySelector("#myGrid");
  let customGrid = "";

  // 把随机颜色函数提到外层，避免重复创建
  function randomBgColor() {
    const x = Math.floor(Math.random() * 256);
    const y = Math.floor(Math.random() * 256);
    const z = Math.floor(Math.random() * 256);
    const bgColor = `rgb(${x}, ${y}, ${z})`; // 模板字符串更简洁
    return bgColor; // 关键：返回生成的颜色值
  }

  button.addEventListener("click", () => {
    customGrid = parseInt(prompt("insert a number between 0 & 100"));
    // 先清空旧网格，避免多次点击叠加
    myGrid.innerHTML = "";

    for (let i = 0; i < customGrid; i++) {
      const column = document.createElement("div");
      column.classList.add("column");
      myGrid.appendChild(column);

      for (let j = 0; j < customGrid; j++) {
        const cell = document.createElement("div");
        cell.classList.add("cell");
        // 直接给当前创建的单元格绑定事件，不用事后批量查询
        cell.addEventListener("mouseover", () => {
          cell.style.backgroundColor = randomBgColor();
        });
        column.appendChild(cell);
      }
    }
  });
});

关键修改点说明 #

1. 给randomBgColor添加return语句：这是解决颜色不生效的核心，让函数能返回生成的RGB字符串，才能正确赋值给backgroundColor。
2. 将随机颜色函数移到循环外：避免每次循环都重复定义函数，减少不必要的性能损耗。
3. 清空旧网格：点击按钮生成新网格前，用myGrid.innerHTML = ""清空原有内容，防止多次点击后网格叠加。
4. 直接绑定事件到新创建的单元格：不用每次循环都去查询所有.hover元素，避免给同一个单元格重复绑定事件，代码更高效。
5. 用模板字符串简化RGB拼接：比传统字符串拼接更清晰易读，减少语法错误概率。

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