Попытка изменить цвет фона элемента сетки при событии щелчка ⇐ CSS

[Anonymous]

Кажется, я не могу понять синтаксис, позволяющий элементу в моей сетке менять цвет при событии щелчка. Я попробовал несколько разных вариантов этого и, похоже, не могу понять, что я делаю неправильно. Довольно новичок в javascript, так что будьте поосторожнее, если это очень очевидный ответ.
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;
}

Я пытался создать отдельную функцию для элемента сетки, и при нажатии на элемент цвет менялся, но, похоже, он не щелкал.

Подробнее здесь: https://stackoverflow.com/questions/784 ... lick-event