How to display a button/container when condition is met DOM manipulation

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

pScore = 0; 
cScore = 0;
tie = 0; 

//UI. When play is clicked make R.P.S buttons appear
const startGame= () => {
    intro = document.querySelector('.intro');
    playBtn = document.querySelector(".playBtn");
    match = document.querySelector('.match');

    playBtn.addEventListener('click', e => {
    match.classList.add("fadeIn");
    playBtn.remove();
    });
}


//When "rock", "paper", or "scissors" is clicked generate random
//option for computer selection then compare to see who wins
const playGame= () => {
    button = document.querySelectorAll('.buttons button');
    choices= ["rock", "paper", "scissors"];
    choiceDisplay = document.querySelector('.matchContainer');
    playerDisplay = document.querySelector('.playerDisplay');

    button.forEach(button => {
        button.addEventListener('click', function(e) {

            //generate random computerSelection
            computerSelection = choices[ Math.floor((Math.random() *choices.length))];
            
            //display computer and player selection on UI
            playerSelection = this.textContent;
            playerDisplay.textContent = " "+ ` Player: ${playerSelection}`;
            choiceDisplay.textContent = ` Computer: ${computerSelection } ` + " ";         
            
            compareSelection(playerSelection, computerSelection);
        });
    }); 
}    

const compareSelection = ( playerSelection, computerSelection) => {
    //compare player and computer choice
    if (playerSelection === computerSelection){ console.log("tie");
    tie++;
    game();
    return;
    } else if ( playerSelection === "rock" && computerSelection === "scissors" ||
    playerSelection === "scissors" && computerSelection === "paper" ||
    playerSelection === "paper" && computerSelection === "rock" ){ 
    console.log  (`You win! ${playerSelection} beats ${computerSelection}`);
    pScore++;
    game();
    return;  
    } else {
    console.log(`You lose! ${computerSelection} beats ${playerSelection}`); 
    cScore++;
    game();
    return; 
    }
    
}   
const game = () => {

    playerScore = document.querySelector('.playerScore');
    computerScore = document.querySelector('.computerScore');
    tieScore = document.querySelector('.tieScore');
    resetBtn = document.querySelector('.resetBtn');
    rpsBtns = document.querySelector('.buttons');
    displayHolder = document.querySelector('.displayHolder');
    theWinner = document.querySelector('.theWinner');
    winSection = document.querySelector('.winSection');
    resetContainer = document.querySelector('.resetContainer');

    playerScore.textContent = pScore; 
    computerScore.textContent = cScore;
    tieScore.textContent = tie; 

    count= pScore +cScore +tie; 

    
    if(count === 5){
        //disable R.P.S buttons and make 'reset' button clickable. Present winner add trophy img
        rpsBtns.style.display = 'none';
        displayHolder.style.display = 'none';
        
        
        if( pScore > cScore && pScore > tie ){
            //add .winSection to display winner
            theWinner.textContent = ("player");
        }
        else if( cScore > pScore && cScore > tie){
            //add .winSection to display winner
            theWinner.textContent = ("computer");
        }
        else {
            //add .winSection to display winner
            winSection.style.display = 'none';
            
        } 
        //Add reset Button
        resetBtn.classList.add = 'fadeIn';
    
    }

}

startGame();
playGame();

<!-- language: lang-css -->

body{
    background-color: #844141;
}

.intro, .buttons{
    text-align: center;

}
div.fadeOut{
    opacity: 0;
    
}

div.fadeIn, .resetBtn.fadeIn{
    opacity: 3;
}

.match, .resetBtn{
    opacity: 0%;
    transition: .5s ease;

}

.score-list, .score-list2, .winSection, .resetContainer{
    font-size: 20px;        
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;

}
.computerTitle, .playerTitle, .tieTitle, .winnerTitle{
    margin: 10px;
    font-size: 30px;
}

.winnerTitle{
    font-size: 40px;
}

.playBtn, .resetBtn{
    font-size: 70px;
    font-family: "Time New Roman", times, serif;
    background-color: #4c586b;
    border-radius: 5px;
    padding: 12px; 
    transition-duration: 1s; 
    
}


/* .reset{
    font-size: 70px;
    font-family: "Time New Roman", times, serif;
    background-color: #4c586b;
    border-radius: 5px;
    padding: 12px; 
    transition-duration: 1s; 
    opacity: 10;

} */
.matchContainer, .playerDisplay{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px
    
}

.displayHolder{
    display: flex;
    justify-content: center;
}

.rockBtn, .paperBtn, .scissorsBtn{
    font-size: 50px;
    background-color:#555d5f;
    margin: 15px;
    border-radius: 5px;
    font-family: "Time New Roman", times, serif;
    
}

.rockBtn:hover, .paperBtn:hover, .scissorsBtn:hover, .playBtn:hover, .resetBtn:hover{
    background-color: #3c3e3f;
    transition: .7s;
}

.title{
    font-size: 45px;
}
.titleStatement{
    font-size: 30px;
}

span{
    font-size: 25px;
}

.theWinner{
    font-size: 53px;
    margin: 13px; 
}
.winSection{
    opacity: 0%;
    transition: 1s;
}


img{
    margin: 10px;
    width: 45px;
    height: 50px;
    
}

<!-- language: lang-html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissors</title>
    <link rel="stylesheet" href="style.css">
    <script src="rps.js" defer="defer"></script>
</head>
<body>
<div id="container">
    <div class="intro">
        <h1 class="title">Rock Paper Scissors</h1>
        <h2 class="titleStatement">Challenge the computer five rounds of R.P.S to see who wins!</h2>
        <!--once this is pressed the screen will transition to everything below -->
        <button class="playBtn">Play!!</button> 
    </div>  

    <div class="match">
          
        <div class="buttons">
            <button class="rockBtn">rock</button>
            <button class="paperBtn">paper</button>
            <button class="scissorsBtn">scissors</button>
        </div>

        <div class="displayHolder">
            <div class="playerDisplay"></div>
            <div class="matchContainer"></div>
            
        </div>
        <div class="score-list">
            <p class="playerTitle">Player Score: </p>
                <span class="playerScore">0</span>
            <p class="computerTitle">Computer Score:</p>
                <span class="computerScore">0</span>
            
        </div>    
            <div class="score-list2">
                <p class="tieTitle">Tie: </p>
                <span class="tieScore">0</span>
            </div>
        
        <div class="winSection">
        <h3 class="winnerTitle">Winner: </h3>
            <span class="theWinner">?</span>
            <img src="/trophy.png" alt="trophy image">
        </div>
        <div class="resetContainer">
            <button class="resetBtn">Play Again!</button>
        </div>
    </div>
</div>
</body>
</html>

<!-- end snippet -->

I am finishing the touches on my R.P.S project and I can't find the right style to get my resetBtn to display in the function game() when the condition "count===5" is met. I would also like some help displaying the .winSection when the conditions inside count === 5 is met. I don't know how i did the .intro section and made the play button disappear and the reset appear after lol

> I tried adding the reset button like how I did the first part (after clicking playbtn) using resetBtn.classList.add = 'fadeIn'; but that didn't work. I messed with the opacity in the css maybe I am crossing over some of the same code in my .css file. After spending some time on this I realize I should just ask for help. Thank you in advance for helping!

the js function to add a class is element.classList.add('my-class') not .add = "my-class". that solves the button issue. you have to register an event to that button otherwise the game won't restart.

other things:

• opacity is a value between 0 and 1 or 0% and 100% (you have opacity: 3)
• the default button type is submit but you don't submit anything, so set the type to button <button type="button">
• indentation is a mess (but I guess that's due to copy paste)
• don't .remove() your playBtn, I guess you will need it for restarting? or in case you directly switch to the game after clicking the restart button then u can do it ofc.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

pScore = 0; 
cScore = 0;
tie = 0; 

//UI. When play is clicked make R.P.S buttons appear
const startGame= () => {
    intro = document.querySelector('.intro');
    playBtn = document.querySelector(".playBtn");
    match = document.querySelector('.match');

    playBtn.addEventListener('click', e => {
    match.classList.add("fadeIn");
    playBtn.style.display = 'none';
    });
}


//When "rock", "paper", or "scissors" is clicked generate random
//option for computer selection then compare to see who wins
const playGame= () => {
    button = document.querySelectorAll('.buttons button');
    choices= ["rock", "paper", "scissors"];
    choiceDisplay = document.querySelector('.matchContainer');
    playerDisplay = document.querySelector('.playerDisplay');

    button.forEach(button => {
        button.addEventListener('click', function(e) {

            //generate random computerSelection
            computerSelection = choices[ Math.floor((Math.random() *choices.length))];
            
            //display computer and player selection on UI
            playerSelection = this.textContent;
            playerDisplay.textContent = " "+ ` Player: ${playerSelection}`;
            choiceDisplay.textContent = ` Computer: ${computerSelection } ` + " ";         
            
            compareSelection(playerSelection, computerSelection);
        });
    }); 
}    

const compareSelection = ( playerSelection, computerSelection) => {
    //compare player and computer choice
    if (playerSelection === computerSelection){ console.log("tie");
    tie++;
    game();
    return;
    } else if ( playerSelection === "rock" && computerSelection === "scissors" ||
    playerSelection === "scissors" && computerSelection === "paper" ||
    playerSelection === "paper" && computerSelection === "rock" ){ 
    console.log  (`You win! ${playerSelection} beats ${computerSelection}`);
    pScore++;
    game();
    return;  
    } else {
    console.log(`You lose! ${computerSelection} beats ${playerSelection}`); 
    cScore++;
    game();
    return; 
    }
    
}   
const game = () => {

    playerScore = document.querySelector('.playerScore');
    computerScore = document.querySelector('.computerScore');
    tieScore = document.querySelector('.tieScore');
    resetBtn = document.querySelector('.resetBtn');
    rpsBtns = document.querySelector('.buttons');
    displayHolder = document.querySelector('.displayHolder');
    theWinner = document.querySelector('.theWinner');
    winSection = document.querySelector('.winSection');
    resetContainer = document.querySelector('.resetContainer');

    playerScore.textContent = pScore; 
    computerScore.textContent = cScore;
    tieScore.textContent = tie; 

    count= pScore +cScore +tie; 

    
    if(count === 5){
        //disable R.P.S buttons and make 'reset' button clickable. Present winner add trophy img
        rpsBtns.style.display = 'none';
        displayHolder.style.display = 'none';
        
        
        if( pScore > cScore && pScore > tie ){
            //add .winSection to display winner
            theWinner.textContent = ("player");
        }
        else if( cScore > pScore && cScore > tie){
            //add .winSection to display winner
            theWinner.textContent = ("computer");
        }
        else {
            //add .winSection to display winner
            winSection.style.display = 'none';
            
        } 
        //Add reset Button
        resetBtn.classList.add('fadeIn');
        // click handler missing to restart game
    }

}

startGame();
playGame();

<!-- language: lang-css -->

body{
    background-color: #844141;
}

.intro, .buttons{
    text-align: center;

}
div.fadeOut{
    opacity: 0;
    
}

div.fadeIn, .resetBtn.fadeIn{
    opacity: 1;
}

.match, .resetBtn{
    opacity: 0%;
    transition: .5s ease;

}

.score-list, .score-list2, .winSection, .resetContainer{
    font-size: 20px;        
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;

}
.computerTitle, .playerTitle, .tieTitle, .winnerTitle{
    margin: 10px;
    font-size: 30px;
}

.winnerTitle{
    font-size: 40px;
}

.playBtn, .resetBtn{
    font-size: 70px;
    font-family: "Time New Roman", times, serif;
    background-color: #4c586b;
    border-radius: 5px;
    padding: 12px; 
    transition-duration: 1s; 
    
}


/* .reset{
    font-size: 70px;
    font-family: "Time New Roman", times, serif;
    background-color: #4c586b;
    border-radius: 5px;
    padding: 12px; 
    transition-duration: 1s; 
    opacity: 10;

} */
.matchContainer, .playerDisplay{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px
    
}

.displayHolder{
    display: flex;
    justify-content: center;
}

.rockBtn, .paperBtn, .scissorsBtn{
    font-size: 50px;
    background-color:#555d5f;
    margin: 15px;
    border-radius: 5px;
    font-family: "Time New Roman", times, serif;
    
}

.rockBtn:hover, .paperBtn:hover, .scissorsBtn:hover, .playBtn:hover, .resetBtn:hover{
    background-color: #3c3e3f;
    transition: .7s;
}

.title{
    font-size: 45px;
}
.titleStatement{
    font-size: 30px;
}

span{
    font-size: 25px;
}

.theWinner{
    font-size: 53px;
    margin: 13px; 
}
.winSection{
    opacity: 0%;
    transition: 1s;
}


img{
    margin: 10px;
    width: 45px;
    height: 50px;
    
}

<!-- language: lang-html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissors</title>
    <link rel="stylesheet" href="style.css">
    <script src="rps.js" defer="defer"></script>
</head>
<body>
<div id="container">
    <div class="intro">
        <h1 class="title">Rock Paper Scissors</h1>
        <h2 class="titleStatement">Challenge the computer five rounds of R.P.S to see who wins!</h2>
        <!--once this is pressed the screen will transition to everything below -->
        <button type="button" class="playBtn">Play!!</button> 
    </div>  

    <div class="match">
          
        <div class="buttons">
            <button class="rockBtn">rock</button>
            <button class="paperBtn">paper</button>
            <button class="scissorsBtn">scissors</button>
        </div>

        <div class="displayHolder">
            <div class="playerDisplay"></div>
            <div class="matchContainer"></div>
        </div>
        <div class="score-list">
            <p class="playerTitle">Player Score: </p>
                <span class="playerScore">0</span>
            <p class="computerTitle">Computer Score:</p>
                <span class="computerScore">0</span>
            
        </div>    
            <div class="score-list2">
                <p class="tieTitle">Tie: </p>
                <span class="tieScore">0</span>
            </div>
        
        <div class="winSection">
        <h3 class="winnerTitle">Winner: </h3>
            <span class="theWinner">?</span>
            <img src="/trophy.png" alt="trophy image">
        </div>
        <div class="resetContainer">
            <button type="button" class="resetBtn">Play Again!</button>
        </div>
    </div>
</div>
</body>
</html>

<!-- end snippet -->