修复“未捕获的类型错误：无法读取 HTMLDivElement 处未定义的属性（读取“添加”）。<anonymous>”

Question

我正在尝试将鼠标悬停在游戏区域内的任何方块上，从而为它们添加“变暗”类。游戏区域按预期生成，但不是添加类，而是每当我将鼠标悬停在有问题的方块上时，我都会收到“未捕获的类型错误：无法读取 HTMLDivElement 处未定义的属性（读取“添加”）。”。

我已经尝试了“createPlayArea”函数中带有事件侦听器的行以及下面注释掉的变量+函数组合，最终在我的 Chrome 控制台中出现了完全相同的错误。

const squareAmount = 50;
const dimensions = '10px';

function createPlayArea() {
    for (i = 0; i < (squareAmount * squareAmount); i++) {
        let squares = document.createElement('div')
        squares.setAttribute('style', 'display: flex; flex-wrap: wrap;')
        squares.classList.add('square')
        squares.style.height = dimensions;
        squares.style.width = dimensions;
        squares.addEventListener('mouseover', square => square.classList.add('darken'))
        playArea.appendChild(squares)
    }
}

createPlayArea()

// let playSquares = document.querySelectorAll('.square')

// function pen() {
//     playSquares.forEach(square => square.addEventListener('mouseover', function (e) {
//         e.classList.add('darken')
//     }))
// }

// pen()

<style>
.square {
  background-color: gray;
}

.darken {
  background-color: black;
}
</style>

<div id="playArea">

</div>

我期望将 .darken 类添加到悬停在其上的方块中。我得到的只是这个愚蠢的错误:')

Answer 1

感谢 JaromandaX，我开始意识到这一点

playSquares.forEach(square => square.addEventListener('mouseover', function (e) {
e.classList.add('darken')
}

应该是

playSquares.forEach(square => square.addEventListener('mouseover', function () {this.classList.add('darken')}

//OR

playSquares.forEach(square => square.addEventListener('mouseover', function () {square.classList.add('darken')}

//It looks like the following should work too but I ended up with an error here as well.

playSquares.forEach(square => square.addEventListener('mouseover', function () {e.target.classList.add('darken')}