如何为每个 div 添加 Eventlisteners 使其不是未定义的？ （JavaScript，更多下文）

Question

我不明白为什么它说是undefined。

错误信息：

dom.js:51 Uncaught TypeError: Cannot set property 'backGroundcolor' of undefined 在 HTMLDivElement。 (dom.js:51)

有问题的行：pixels.style.backGroundcolor = 'black';

let drawBtn = document.querySelector('#letsDraw')
drawBtn.onclick = clearAndDraw

function clearAndDraw() {
  clear()
  draw()
}

function draw() {
  screenSize = textbox.value
  for (i = 0; i < screenSize ** 2; i++) {
    pixel = document.createElement('div');
    pixel.classList.add('pixel');
    pixel.style.border = '1px solid black';
    pixel.style.backgroundColor = 'white';
    screen.appendChild(pixel);
  }
  screen.style.gridTemplateColumns = `repeat(${screenSize}, auto) `;
  screen.style.gridTemplateRows = `repeat(${screenSize}, auto) `;

  const pixels = document.querySelectorAll('.pixel')
  pixels.forEach(pxl => {
    pxl.addEventListener('mouseenter', function() {
      pixels.style.backGroundcolor = 'black';
    })
  })
}

<div class=screen>
</div>

Answer 1

您的目标是像素列表，而不是元素本身。因此，如果您的 forEach 使用 'pxl' 作为每个元素的变量，则必须更改此行。

编辑： 另一件事是您的样式属性的拼写错误。将“背景颜色”更改为“背景颜色”

pixels.style.backGroundcolor = 'black';

到这里

pxl.style.backgroundColor = 'black';