新手求助：我的JS像素上色代码无法运行，请求排查问题

1. 事件绑定报错：元素集合不能直接加事件 #

document.querySelectorAll('.item')返回的是一组元素（NodeList），就像装着3个颜色块的小数组。你直接给这个数组用addEventListener，浏览器会直接报错——因为数组本身没有绑定事件的能力，必须给数组里的每个颜色块单独绑定点击事件。

2. 往innerHTML塞DOM元素会显示乱码 #

pixelsNode.innerHTML += node里的node是一个真实的DOM元素（比如调色板里的颜色span），当你把它塞进innerHTML时，浏览器会把它转换成字符串，最终显示成[object HTMLSpanElement]，根本不是你想要的彩色像素块。

3. 核心逻辑缺失：没实现“选色→上色”的流程 #

你的需求是给像素div加颜色，但目前代码既没创建可上色的像素格子，也没记录选中的颜色，点击颜色块就直接塞元素，完全偏离了像素画的核心逻辑。

第一步：修复事件绑定，记录选中的颜色 #

let itemNode = document.querySelectorAll(`.item`);
let pixelsNode = document.querySelector(`.pixels`);
let selectedColor = ''; // 用来存选中的颜色类名

// 给每个颜色块单独绑定点击事件
itemNode.forEach(item => {
  item.addEventListener('click', (evt) => {
    // 拿到当前点击色块的颜色类（比如color1、color2）
    selectedColor = evt.target.classList[1];
  });
});

第二步：生成可上色的像素格子 #

// 生成20×20的像素网格（共400个像素）
for (let i = 0; i < 400; i++) {
  let pixel = document.createElement('div');
  pixel.classList.add('pixel');
  // 给每个像素绑定点击上色事件
  pixel.addEventListener('click', () => {
    if (selectedColor) {
      // 先清空之前的颜色，再添加上选中的颜色
      pixel.className = 'pixel';
      pixel.classList.add(selectedColor);
    }
  });
  pixelsNode.appendChild(pixel);
}

第三步：添加CSS让色块和像素显示出来 #

别忘了加这段CSS，不然颜色块和像素都是看不见的：

.item {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px;
  cursor: pointer;
}
.color1 { background-color: red; }
.color2 { background-color: blue; }
.color3 { background-color: yellow; }

.pixel {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid #eee;
  margin: 1px;
  cursor: crosshair;
}

• querySelectorAll返回的是元素集合，必须用forEach循环给每个元素绑定事件
• innerHTML只能处理字符串，要添加真实DOM元素得用createElement()和appendChild()
• 像素画的核心逻辑是：先选中颜色 → 再点击像素格子上色，需要用变量临时存储选中的颜色

内容的提问来源于stack exchange，提问作者Joe Garleen