如何为JavaScript实现的网格方块添加点击识别功能？

你的思路是正确的，只需要调整两个细节就能实现需求：

• 模板字符串语法错误：设置ID时要用反引号（`）包裹，单引号无法解析变量；
• 添加点击事件监听：给每个方块绑定点击事件，在回调里打印标识。

修改后的完整代码 #

HTML

<div id="container"></div>

CSS

:root {
  --grid-cols: 1;
  --grid-rows: 1;
}

#container {
  display: grid;
  grid-gap: 1em;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: center;
  cursor: pointer; /* 添加上手型光标，提升交互体验 */
}

.cell {
  /* 可在此给cell类添加额外样式，比如 hover 效果、背景色等 */
}

JavaScript

const container = document.getElementById("container");

function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  for (let c = 0; c < (rows * cols); c++) { // 用let声明变量c，避免全局污染
    let cell = document.createElement("div");
    cell.innerText = (c + 1);
    // 一次性添加多个类
    cell.classList.add('grid-item', 'cell');
    // 用模板字符串生成唯一ID
    cell.id = `cell-${c}`;
    // 绑定点击事件，打印方块标识
    cell.addEventListener('click', function() {
      console.log(`点击方块：ID=${this.id}，序号=${this.innerText}`);
    });
    container.appendChild(cell);
  };
};

makeRows(16, 16);

关键修改说明 #

1. 变量作用域：循环内的c添加let声明，避免变量泄漏到全局作用域；
2. 类的管理：用classList.add替代直接赋值className，可以灵活添加多个类且不会覆盖原有样式类；
3. ID生成：使用反引号包裹模板字符串，正确解析变量c，生成cell-0、cell-1这类唯一标识；
4. 交互逻辑：通过addEventListener绑定点击回调，利用this获取当前点击的方块元素，按需打印ID或序号信息。

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