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

Question

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

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

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

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

标签： javascripthtmlcss

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";
    });
}