尝试在单击事件上更改网格元素的背景颜色

Question

我似乎无法弄清楚让网格中的元素在单击事件上更改颜色的语法。我已经尝试过几次不同的迭代，但似乎无法弄清楚我做错了什么。对于 javscript 来说还很陌生，所以如果这是一个非常明显的答案，请对我宽容一些。

JS

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

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

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

    const gridElement = document.getElementById('grid-item');
    gridElement.addEventListener('click', () => {
        gridElement.target.style.backgroundColor = 'white';
    })

CSS

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

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

.grid-item{
    padding: 1em;
    border: 1px solid #131313;
    text-align: center;
}

.grid-item:hover{
    background-color: #ddd;
}

我尝试创建一个单独的函数来定位网格元素，单击该元素时颜色会改变，但似乎没有单击。

Answer 1

首先，

grid-item

不是用

id

查询的元素

getElementById

，而是

class

，可以使用

getElementsByClassName

或

querySelectorAll

。

我更喜欢

querySelectorAll

，因为它可以用于任何选择器，但请记住，它返回一个

NodeList

，您需要对其进行迭代以在每个项目中应用单击事件。

    const gridElements = document.querySelectorAll('.grid-item');

    gridElements.forEach(gridElement => {
      gridElement.addEventListener('click', () => {
        gridElement.style.backgroundColor = 'white';
      })
    })