Неверный 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 => {
    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();
};