重新运行函数时应用了错误的 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 Gamefunction 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 => {

    item.addEventListener('click', event => {     //////   <<<<  HERE

第二次运行游戏时，单击的方块中有 2 个侦听器。

第一个运行正常，符合预期。但改变 randomSquare 值。

第二个事件会报告失败，因为现在点击的方块不再是 randomSquare

当你运行游戏 100 次时，你就有了 6400 个听众！！！！

Answer 2

第一种方法： 在附加新侦听器之前删除所有侦听器（如果存在）

function onClick(event) {

    const item = event.target;

    if (item.id == randomSquare) {

        console.log("correct", item);

        score++;

        tries++;

        scoreOutput.innerHTML = score;

        randomSquare = rndSq(squareset);

        target.innerHTML = randomSquare;

        scoreOutput.classList.add('correct');

        scoreOutput.classList.remove('incorrect');

    } else {

        console.log("incorrect", item);

        tries++;

        // scoreDisplay.innerHTML = score;

        randomSquare = rndSq(squareset);

        target.innerHTML = randomSquare;

        scoreOutput.classList.remove('correct');

        scoreOutput.classList.add('incorrect');

    };

}

function startGame() {

    console.log("startGame");

    //To make the board active

    board.style.pointerEvents = 'all';

    //First Target

    target.innerHTML = randomSquare;

    //Start Game timer

    gameTime();

    document.querySelectorAll('.square').forEach(item => {

        item.removeEventListener('click', onClick);

        item.addEventListener('click', onClick);

    })

};

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

document.querySelectorAll('.square').forEach(item => {

    item.addEventListener('click', onClick);

})

function startGame() {

    console.log("startGame");

    //To make the board active

    board.style.pointerEvents = 'all';

    //First Target

    target.innerHTML = randomSquare;

    //Start Game timer

    gameTime();

};