为什么我的 classlist.remove 没有删除 class？

Question

我目前正在做一个纸、石头、剪刀游戏。 除了在游戏结束时出现重赛按钮外，我几乎可以正常工作。 我已经能够通过抓住它来成功隐藏按钮const rematchButton = document.querySelector('.hiddenButton'); 并使用 rematchButton.classList.add(' hidden rematchButton.classList.add('hidden'); . 在 css 文件中，我将隐藏的 class 设置为display: none; . 我有一条消息，一旦玩家或计算机达到 5 胜并添加了rematchButton.classList.remove('hidden'); 我希望重赛按钮会出现在“游戏结束”消息旁边，但按钮仍然没有出现，只有“游戏结束”消息出现。 我把 classlist.remove 放在错误的地方了吗？

这是我的 html 文件中包含重新匹配按钮的部分：

        <div id="results">
            <div class="rematchGroup">
                <!-- <img src="photos/rematch.jpg"> -->
                <br>
                <button class="buttons hiddenButton">rematch?</button>  
            </div>
        </div>  

这是 javascript 文件：

// DECLARES A VARIABLE TO HOLD AN ARRAY OF CHOICES
const choices = ['rock', 'paper', 'scissors'];
// DECLARES A VARIABLE FOR PLAYERSCORE AND COMPUTERSCORE AND SETS THEM TO 0
let playerScore = 0;
let computerScore = 0;
// DECLARES A VARIABLE FOR PLAYERSELECTION AND SETS IT TO AN EMPTY STRING
let playerSelection = '';

// DECLARES VARIABLES FOR ROCK, PAPER, & SCISSORS AND ASSIGNS IT TO THE RPS BUTTON ID'S
const rock = document.querySelector('#rock');
const paper = document.querySelector('#paper');
const scissors = document.querySelector('#scissors');

const rematchButton = document.querySelector('.hiddenButton');
rematchButton.classList.add('hidden');

// FUNCTION TO SELECT ONE OF THE CHOICES ARRAYS AT RANDOM
function computerPlay() {
    return choices[~~(Math.random() * choices.length)];
} 

// EVENTLISTENERS FOR BUTTON CLICKS TO CORRELATE WITH PLAYERSELECTION
rock.addEventListener('click', () => {
    playerSelection = 'rock';
    playGame();
});
paper.addEventListener('click', () => {
    playerSelection = 'paper';
    playGame();
});
scissors.addEventListener('click', () => {
    playerSelection = 'scissors';
    playGame();
});

// FUNCTION TO COMPARE PLAYERSELECTION WITH COMPUTERSELECTION
// INCREMENTS THE PLAYER & COMPUTER SCORE
// DISPLAYS MESSAGE SUMMARY OF WHO WON THE ROUND
function playRound(playerSelection, computerSelection) {
    if (playerSelection === computerSelection) {
        document.getElementById('results').innerHTML = 'you\'ve tied!'
    } else if (computerSelection === 'paper' && playerSelection === 'rock') {
        document.getElementById('results').innerHTML = 'you\'ve lost that round! you chose rock, the computer chose paper.';
        computerScore += 1;
    } else if (computerSelection === 'scissors' && playerSelection === 'paper') {
        document.getElementById('results').innerHTML = 'you\'ve lost that round! you chose paper, the computer chose scissors.';
        computerScore += 1;
    } else if (computerSelection === 'rock' && playerSelection === 'scissors') {
        document.getElementById('results').innerHTML = 'you\'ve lost that round! you chose scissors, the computer chose rock.';
        computerScore += 1;
    } else if (computerSelection === 'rock' && playerSelection === 'paper') {
        document.getElementById('results').innerHTML = 'you\'ve won that round! you chose paper, the computer chose rock.';
        playerScore += 1;
    } else if (computerSelection === 'paper' && playerSelection === 'scissors') {
        document.getElementById('results').innerHTML = 'you\'ve won that round! you chose scissors, the computer chose paper.';
        playerScore += 1;
    } else if (computerSelection === 'scissors' && playerSelection === 'rock') {
        document.getElementById('results').innerHTML = 'you\'ve won that round! you chose rock, the computer chose scissors.';
        playerScore += 1;
    } else {
        document.getElementById('results').innerHTML = 'that\'s not an acceptable answer!'
    }
}

// FUNCTION THAT ASSIGNS COMPUTERPLAY(FUNCTION) TO COMPUTERSELECTION(VARIABLE)
// RUNS THE PLAYROUND FUNCTION
// DISPLAYS COMPUTER & PLAYER SCORE
// RUNS THE ENDGAME FUNCTION WHEN PLAYER OR COMPUTER REACHES 5 WINS
function playGame() {
    computerSelection = computerPlay();
    playRound(playerSelection, computerSelection);

    

    // const results = document.getElementById('results');
    // const resultsContent = document.createElement('div');
    // resultsContent.textContent = roundResult;
    // results.appendChild(resultsContent);

    const score = document.getElementById('roundScore');
    document.getElementById('roundScore').innerHTML = `player score: ${playerScore} | computer score: ${computerScore}`;

    if (playerScore < 5 && computerScore < 5) {
        return;
    } else if (playerScore === 5 || computerScore === 5) {
        endGame();
    } else if (playerScore === 6 || computerScore === 6) {
        location.reload();
    }
}

// FUNCTION THAT DISPLAYS GAME OVER MESSAGE WHEN RAN
function endGame() {
    if (playerScore > computerScore) {
    document.getElementById('results').innerHTML = 'GAME OVER <BR> you win! you\'ve beat the computer to 5 wins.';
    rematchButton.classList.remove('hidden');
    } else if (computerScore > playerScore) {
    document.getElementById('results').innerHTML = 'GAME OVER <BR> you lose! the computer has beat you to 5 wins';
    rematchButton.classList.remove('hidden');
    }
}

Answer 1

罪魁祸首是这一行：

document.getElementById('results').innerHTML = 'GAME OVER <BR> you win! you\'ve beat the computer to 5 wins.';

（以及当你输掉它时的等价物）。

这会将results div 的全部内容替换为您的游戏结束消息 - 已经从 DOM 中删除的任何其他内容。

但是，已经存在的内容包括您的重新匹配按钮 - 因此从中删除 class 没有明显效果，它不再在文档中！

根据您的代码当前设置方式，最简单的修复可能如下：在results中添加一个新 div，专门用于保存消息：

    <div id="results">
        <div id="results-message"></div>
        <div class="rematchGroup">
            <!-- <img src="photos/rematch.jpg"> -->
            <br>
            <button class="buttons hiddenButton">rematch?</button>  
        </div>
    </div> 

然后对于将results div 的内容设置为游戏结束消息的上述行，只需设置此内部 div 的内容即可：

document.getElementById('results-message').innerHTML = 'GAME OVER <BR> you win! you\'ve beat the computer to 5 wins.';

（对于另一个类似）。

这只会覆盖任何现有的消息，但会保留其他 DOM 元素，包括重新匹配按钮，保持原样。