表格单元格点击无法变色求助（JavaScript像素生成器开发）

我是JavaScript新手，正在开发一款像素生成器，目前功能已接近完成，但点击表格中的单元格时，无法将其背景色切换为选中的颜色。我尝试添加以下JavaScript代码但未生效：

table.addEventListener("click", function (event) {
  if (event.target.tagName === "td") {
    event.target.style.backgroundColor = colorGrid;
  }
}

我还考虑到table变量可能存在局部作用域限制，对代码进行了调整，但问题仍未解决。

完整修正代码 #

HTML（无需修改）

<!DOCTYPE html>
<html>
<head>
    <title>Pixel Art Maker!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Pixel Art Maker</h1>

    <h2>Choose Grid Size</h2>
    <form id="sizePicker">
        Grid Height:
        <input type="number" id="inputHeight" name="height" min="1" value="1">
        Grid Width:
        <input type="number" id="inputWidth" name="width" min="1" value="1">
        <input type="submit">
    </form>

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">

    <h2>Design Canvas</h2>
    <table id="pixelCanvas"></table>

    <script src="designs.js"></script>
</body>
</html>

CSS（无需修改）

body {
    text-align: center;
}

h1 {
    font-family: Monoton;
    font-size: 70px;
    margin: 0.2em;
}

h2 {
    margin: 1em 0 0.25em;
}

h2:first-of-type {
    margin-top: 0.5em;
}

table,
tr,
td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
}

修正后的JavaScript

// Select color input
const colorGrid = document.getElementById("colorPicker");

// 提前获取表格元素，用于事件委托
const table = document.getElementById("pixelCanvas");

// 绑定表格点击事件（事件委托，一次绑定永久生效）
table.addEventListener("click", function (event) {
  // tagName返回值为大写，需匹配TD
  if (event.target.tagName === "TD") {
    // 取颜色选择器的value属性获取选中颜色
    event.target.style.backgroundColor = colorGrid.value;
  }
});

// 绑定表单提交事件
const form = document.getElementById("sizePicker");
form.addEventListener("submit", makeGrid);

function makeGrid(event) {
  // 阻止表单默认提交行为
  event.preventDefault();
  
  // 提交时重新获取最新的尺寸输入值
  const sizeHeight = document.getElementById("inputHeight").value;
  const sizeWidth = document.getElementById("inputWidth").value;
  
  // 清空旧网格，避免多次提交后叠加
  table.innerHTML = "";
  
  // 生成新网格
  for (let i = 1; i <= sizeHeight; i++) {
    const tableRow = document.createElement("tr");
    // 内层循环改用不同变量，避免覆盖外层i的值
    for (let j = 1; j <= sizeWidth; j++) {
      const tableCell = document.createElement("td");
      tableRow.appendChild(tableCell);
    }
    table.appendChild(tableRow);
  }
}

问题根源及修正说明 #

1. 颜色值获取错误：原代码直接将颜色选择器的DOM元素赋值给背景色，正确做法是取colorGrid.value获取选中的十六进制颜色值。
2. 事件绑定逻辑问题：使用事件委托直接绑定在表格父元素上，无论网格是否重新生成，点击事件都能生效，无需每次生成后重复绑定。
3. 尺寸值未实时更新：原代码仅在页面加载时获取一次尺寸，提交表单时需要重新读取输入框的最新值，否则新尺寸不会生效。
4. 旧网格未清空：每次生成新网格前用table.innerHTML = ""清空原有内容，避免多次提交后网格叠加。
5. 循环变量冲突：原代码内外层循环都使用i，导致内层循环覆盖外层变量值，改用j作为内层循环变量解决冲突。

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