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

Question

我正在开发一个点击游戏，其中向用户呈现一个坐标，然后他们必须单击相应的坐标。

我对其进行了设计，如果他们是正确的，则会添加一个类，在他们的分数周围放置一个绿色边框。如果他们不正确，就会添加一个不同的班级，并在他们的分数周围加上红色边框。这在第一次玩游戏时有效。问题是，以后每次播放时，无论正确与否，它都只应用红色边框。

我很困惑，因为它仍然正确计算分数 - 如果您单击正确的方块，那么您仍然会得分，但它应用了错误的类别。

这是我的代码笔的链接：https ://codepen.io/jacobc1596/pen/yLNwQZR

这是我认为的相关代码：

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();

}

.correct {

    border:6px solid green;

    border-radius: 50%;

}

.incorrect {

    border:6px solid red;

    border-radius: 50%;

}

Answer 1

每次开始游戏时，都会向所有方块添加事件侦听器：function startGame() {board.style.pointerEvents = 'all';target.innerHTML = randomSquare;gameTime()document.querySelectorAll('.square').forEach(item => {&nbsp; &nbsp; item.addEventListener('click', event => {&nbsp; &nbsp; &nbsp;//////&nbsp; &nbsp;<<<<&nbsp; HERE第二次运行游戏时，单击的方块中有 2 个侦听器。第一个运行正常，符合预期。但改变 randomSquare 值。第二个事件会报告失败，因为现在点击的方块不再是 randomSquare当你运行游戏 100 次时，你就有了 6400 个听众！！！！

Answer 2

第一种方法： 在附加新侦听器之前删除所有侦听器（如果存在）function onClick(event) {&nbsp; &nbsp; const item = event.target;&nbsp; &nbsp; if (item.id == randomSquare) {&nbsp; &nbsp; &nbsp; &nbsp; console.log("correct", item);&nbsp; &nbsp; &nbsp; &nbsp; score++;&nbsp; &nbsp; &nbsp; &nbsp; tries++;&nbsp; &nbsp; &nbsp; &nbsp; scoreOutput.innerHTML = score;&nbsp; &nbsp; &nbsp; &nbsp; randomSquare = rndSq(squareset);&nbsp; &nbsp; &nbsp; &nbsp; target.innerHTML = randomSquare;&nbsp; &nbsp; &nbsp; &nbsp; scoreOutput.classList.add('correct');&nbsp; &nbsp; &nbsp; &nbsp; scoreOutput.classList.remove('incorrect');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; console.log("incorrect", item);&nbsp; &nbsp; &nbsp; &nbsp; tries++;&nbsp; &nbsp; &nbsp; &nbsp; // scoreDisplay.innerHTML = score;&nbsp; &nbsp; &nbsp; &nbsp; randomSquare = rndSq(squareset);&nbsp; &nbsp; &nbsp; &nbsp; target.innerHTML = randomSquare;&nbsp; &nbsp; &nbsp; &nbsp; scoreOutput.classList.remove('correct');&nbsp; &nbsp; &nbsp; &nbsp; scoreOutput.classList.add('incorrect');&nbsp; &nbsp; };}function startGame() {&nbsp; &nbsp; console.log("startGame");&nbsp; &nbsp; //To make the board active&nbsp; &nbsp; board.style.pointerEvents = 'all';&nbsp; &nbsp; //First Target&nbsp; &nbsp; target.innerHTML = randomSquare;&nbsp; &nbsp; //Start Game timer&nbsp; &nbsp; gameTime();&nbsp; &nbsp; document.querySelectorAll('.square').forEach(item => {&nbsp; &nbsp; &nbsp; &nbsp; item.removeEventListener('click', onClick);&nbsp; &nbsp; &nbsp; &nbsp; item.addEventListener('click', onClick);&nbsp; &nbsp; })};或者第二种方式，仅附加侦听器一次：document.querySelectorAll('.square').forEach(item => {&nbsp; &nbsp; item.addEventListener('click', onClick);})function startGame() {&nbsp; &nbsp; console.log("startGame");&nbsp; &nbsp; //To make the board active&nbsp; &nbsp; board.style.pointerEvents = 'all';&nbsp; &nbsp; //First Target&nbsp; &nbsp; target.innerHTML = randomSquare;&nbsp; &nbsp; //Start Game timer&nbsp; &nbsp; gameTime();};