why is my classlist.remove not removing the class?

Question

i'm currently working on a paper, rock, scissors game. i have pretty much everything working except getting a rematch button to show up at the end of a game. i've been able to successfully hide the button by grabbing it const rematchButton = document.querySelector('.hiddenButton'); and adding a classlist of hidden with rematchButton.classList.add('hidden'); . in the css file, i have the class of hidden set to display: none; . i have a message that will show up once the player or computer has reached 5 wins and have added rematchButton.classList.remove('hidden'); which i would expect for the rematch button to then show up alongside the "game over" message but the button is still not showing up, only the "game over" message shows up. am i putting the classlist.remove in the wrong place?

this is the portion of my html file that contains the rematch button:

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

and this is the javascript file:

// 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

The culprit is this line:

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

(and its equivalent when you lose).

This replaces the entire content of the results div with your game over message - anything else that's there already is removed from the DOM.

But, what's already there includes your rematch button - so removing a class from it has no noticeable effect, it's no longer in the document!

The easiest fix based on how your code is currently set up is probably as follows: add a new div inside your results one, specifically to hold the message:

    <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> 

And then for the above line that sets the contents of the results div to the game over message, just set the contents of this inner div instead:

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

(and similarly for the other one).

That will only overwrite any existing message, but leave the other DOM elements, including the rematch button, as they are.