点击网格元素时无法修改其背景颜色的问题求助

嘿，别着急！作为JavaScript新手遇到这种小问题太正常啦～我帮你梳理下代码里的问题，很快就能搞定！

问题出在哪？ #

• 元素选择错误：你用document.getElementById('grid-item')去获取网格元素，但你的单元格是通过className = 'grid-item'设置的类名，不是id！而且getElementById只能找到单个带对应id的元素，你这里256个网格项都没有设置id="grid-item"，所以gridElement其实是null，根本加不上点击事件。
• 事件回调写法有误：就算你找到了正确的元素，回调里的gridElement.target也不对，应该用事件参数里的target来获取实际被点击的元素。

两种解决方法 #

方法1：创建单元格时直接绑定点击事件

这种方式简单直接，适合新手理解，在创建每个grid-item的时候就给它加上点击事件：

const gridContainer = document.getElementById('container');

function makeGrid(rows, cols) {
  gridContainer.style.setProperty('--grid-rows', rows);
  gridContainer.style.setProperty('--grid-cols', cols);

  for (let i = 0; i < rows * cols; i++) { // 这里要加let声明i，避免全局变量问题
    let cell = document.createElement('div');
    cell.className = 'grid-item';
    // 给每个单元格添加点击事件
    cell.addEventListener('click', function() {
      this.style.backgroundColor = 'white';
    });
    gridContainer.appendChild(cell);
  }
}
makeGrid(16, 16);

方法2：用事件委托（更高效）

如果网格很大，给每个元素单独加事件会有点浪费性能，这时候可以把事件绑定在父容器container上，通过事件冒泡来处理所有子元素的点击：

const gridContainer = document.getElementById('container');

function makeGrid(rows, cols) {
  gridContainer.style.setProperty('--grid-rows', rows);
  gridContainer.style.setProperty('--grid-cols', cols);

  for (let i = 0; i < rows * cols; i++) {
    let cell = document.createElement('div');
    gridContainer.appendChild(cell).className = 'grid-item';
  }
}
makeGrid(16, 16);

// 给父容器加点击事件，判断点击的是网格项
gridContainer.addEventListener('click', function(e) {
  if (e.target.classList.contains('grid-item')) {
    e.target.style.backgroundColor = 'white';
  }
});

另外补充个小细节：你的for循环里的i没有用let声明，会变成全局变量，最好加上let避免后续可能的奇怪问题哦～

备注：内容来源于stack exchange，提问作者cld0033