Javascript 重新运行函数时应用了错误的CSS类

我正在开发一个点击式游戏，其中一个坐标显示给用户，然后他们必须点击相应的坐标

我对它进行了样式化，这样如果它们是正确的，就会添加一个类，在它们的分数周围放置一个绿色边框。如果他们不正确，将添加一个不同的类，该类将在他们的分数周围放置一个红色边框。这在第一次玩游戏时起作用。问题是，以后每次播放它时，不管它是否正确，它都只应用红色边框

我很困惑，因为它仍然正确计算分数-如果你点击右边的方块，那么你仍然会得到一分，但它应用了错误的类

以下是指向我的代码笔的链接：

这是我考虑的相关代码：

function startGame() {

    board.style.pointerEvents = 'all';
    target.innerHTML = randomSquare;
    gameTime()

    document.querySelectorAll('.square').forEach(item => {
        item.addEventListener('click', event => {
            if(item.id == randomSquare) {
                score++
                tries++
                scoreOutput.innerHTML = score;
                randomSquare = rndSq(squareset);
                target.innerHTML = randomSquare;
                scoreOutput.classList.add('correct'); //adds 'correct' class
                scoreOutput.classList.remove('incorrect'); //removes 'incorrect' class
            } else {
                tries++;
                // scoreDisplay.innerHTML = score;
                randomSquare = rndSq(squareset);
                target.innerHTML = randomSquare;
                scoreOutput.classList.remove('correct'); //removes 'correct' class
                scoreOutput.classList.add('incorrect'); //adds 'incorrect' class
            };
        })
    })
};

//Reset Game (runs when the game timer runs out)
function reset() {
    tries=0;
    score=0;
    target.innerHTML = '';
    strt.style.visibility = "visible";
    rst.style.visibility = 'hidden';
    board.style.pointerEvents = 'none'; 

    //to remove whatever class was last applied before game finish.
    scoreOutput.classList.remove('incorrect');
    scoreOutput.classList.remove('correct');
    scoreOutput.innerHTML = '';
}

//End Game
function end() {
    scoreDisplay.innerHTML = "Time's Up! You scored " + score + " points!"
    reset();
}

---

每次开始游戏时，都会将事件侦听器添加到所有方块：

function startGame() {

board.style.pointerEvents = 'all';
target.innerHTML = randomSquare;
gameTime()

document.querySelectorAll('.square').forEach(item => {
    item.addEventListener('click', event => {     //////   <<<<  HERE

函数startName（）{
board.style.pointerEvents='all'；
target.innerHTML=randomSquare；
游戏时间（）
document.queryselectoral（'.square'）.forEach（项=>{
item.addEventListener（'click'，event=>{///p>第一种方式：
在附加新侦听器之前，请删除所有侦听器（如果存在）

函数onClick（事件）{
const item=event.target；
if（item.id==randomSquare）{
控制台日志（“正确”，项目）；
分数++；
尝试++；
scoreOutput.innerHTML=分数；
随机平方=rndSq（平方集）；
target.innerHTML=randomSquare；
scoreOutput.classList.add（'correct'）；
scoreOutput.classList.remove（'error'）；
}否则{
控制台日志（“不正确”，项目）；
尝试++；
//scoreDisplay.innerHTML=分数；
随机平方=rndSq（平方集）；
target.innerHTML=randomSquare；
scoreOutput.classList.remove（'correct'）；
scoreOutput.classList.add（'error'）；
};
}

函数startName（）{
控制台日志（“startGame”）；
//使板处于活动状态
board.style.pointerEvents='all'；
//第一目标
target.innerHTML=randomSquare；
//启动游戏计时器
游戏时间（）；
document.queryselectoral（'.square'）.forEach（项=>{
item.removeEventListener（'click'，onClick'）；
item.addEventListener（“单击”，再次单击）；
})
};

或第二种方式，仅附加侦听器一次：

document.querySelectorAll（'.square'）.forEach（item=>{
item.addEventListener（“单击”，再次单击）；
})
函数startName（）{
控制台日志（“startGame”）；
//使板处于活动状态
board.style.pointerEvents='all'；
//第一目标
target.innerHTML=randomSquare；
//启动游戏计时器
游戏时间（）；
};
Ahh gotcha！有道理。据我所知，解决方案是在
reset
函数中删除此事件侦听器，以便每次重新运行游戏时，只添加一次事件侦听器。在这种情况下，在
removeEventListener（）
方法中，我要删除的函数的名称是什么？（我对此不确定，因为该函数是匿名函数，因此未命名）。您不必担心删除事件侦听器。只需在设置布局时添加一次即可。我选择了第二种方法，因为我认为它更有效。添加
const item=event.target；
，目的是什么？我理解这是必要的，因为没有它，函数无法工作，但我不理解这一行是什么意思de的意思是。它只是一个重写，而不是访问
event.target.id
，我将编写
item=event.target
，只是为了向您展示
evet。target
是一个
项
，没有什么特别之处：D
function startGame() {

board.style.pointerEvents = 'all';
target.innerHTML = randomSquare;
gameTime()

document.querySelectorAll('.square').forEach(item => {
    item.addEventListener('click', event => {     //////   <<<<  HERE