这是引用整个窗口，而不是forEach循环中的元素

Question

我是javascript新手，并试图通过构建井字游戏来练习我所知道的知识。

我已经在HTML中创建了一个网格，正在尝试记录播放器的通过将被单击的块更改为X或O，可以通过添加类名来实现。我还保存了单击的块的位置，最后使用winCheck函数检查最后一步是否导致获胜。

下面是引发错误的代码部分：

    const square = document.querySelectorAll('.square')
    // playing : x starts
    let player = 'x'

    square.forEach(block=>{
        block.addEventListener('click', play(player))
    })

    function play(player) {
        if(!search(this.id,occupied)){
            occupied.push(this.id)
            if(player==='x'){
                this.classList.add('x')
                player = 'o'
                x.push(this.id)
            }else if(player==='o'){
                this.classList.add('o')
                player = 'x'
                o.push(this.id)
            }
            winCheck()
        }
    }
引发错误：

TypeError: this.classList is undefined
当我在play

函数中执行一个console.log（this）时，我看到它正在引用整个窗口（文档或DOM或我不知道的正确词，因为我是前端开发的新手]）

如果问题缺乏细节，很难对您不知道的话题提出问题，我很抱歉

我对javascript并不陌生，并试图通过构建井字游戏来练习我所知道的知识。我在HTML中创建了一个网格，并试图通过更改块来记录玩家的移动，...

Answer 1

您编写的是Vanilla JS的代码，但是您将jQuery和Vanilla JS的概念混合在一起。

Answer 2

我要做的第一件事是向文档中添加一个事件侦听器，然后处理事件本身。当一个人可以做到这一点时，将事件侦听器附加到每个单独的正方形是没有意义的。