如何在单击 JS 生成的特定元素时添加颜色

Question

我正在使用 HTML、CSS 和 vanilla JS 创建一个像素艺术制作工具。大部分时间我都创建了 UI，但我无法使用该功能。我试过了：

let cell = document.body.querySelectorAll('.grid-square');

cell.addEventListener('click', function() {

    cell.style.backgroundColor = 'red';

});

但是我的页面“addEventListener”不是一个函数。如何让我的 JS 在 HTML 之后加载，以便我可以让它工作？

https://jsfiddle.net/wygtshu6/1/

Answer 1

let cells = document.body.querySelectorAll('.grid-square'); // querySelectorAll return all elements which have grid-square class.

for(let i = 0; i < cells.length; i++){

        cells[i].addEventListener('click', function(){

            cells[i].style.backgroundColor = "red";

    });

}