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

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

let cell = document.body.querySelectorAll('.grid-square');
cell.addEventListener('click', function() {
    cell.style.backgroundColor = 'red';
});

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

let cells=document.body.queryselectoral（“.grid square”）；//QuerySelector将返回具有grid square类的所有元素。
for（设i=0；i

只有两个步骤可以让它正常工作：

querySelectorAll

返回一个元素数组，因此您需要遍历这些元素以将侦听器添加到每个单元格：

您需要在创建单元后执行此操作。它们是在

createGrid

函数中创建的，因此我们可以在该函数末尾调用它：

工作示例：

let canvas=document.querySelector（'.canvas'）；
let button=document.querySelector（'button'）；
让高；
让宽；
让color=document.querySelector（'.colorChoice'）.value；
函数setUpCellListeners（）{
让单元格=document.queryselectoral（'.grid square'）；
cells.forEach（（cell）=>{
cell.addEventListener（'click'，function（）{
cell.style.backgroundColor='红色'；
});
});
}
//函数根据用户输入构建网格
函数createGrid（高度=25，宽度=25）{
canvas.innerHTML=''；
for（设i=0；i
.grid square{
高度：12px；
宽度：12px；
边框：1px黑色实心；
}
.行{
显示器：flex；
证明内容：中心；
}
.帆布{
最大高度：继承；
最大宽度：75%；
}

像素艺术制作人
排
柱
提交
颜色
您应该使用一个表而不是div，并且应该对表上的单击事件使用事件委派，而不是向每个单元格添加事件侦听器。下面是一系列简短的视频
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";
    });
}

function setUpCellListeners(){
    let cells = document.querySelectorAll('.grid-square');
    cells.forEach((cell) => {
        cell.addEventListener('click', function() {
            cell.style.backgroundColor = 'red';
        });
   });
}

//function to build the grid based on user input
function createGrid(height = 25, width = 25) {

    /* code to set up grid.... */

    // NOW we can set up our listeners because our grid is created
    setUpCellListeners();
}