How can I call A function in the eventListener when "Play Again!!" button is shown

Question

`

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){
    tie++;
    game();
    return;
    } else if ( playerSelection === "rock" && computerSelection === "scissors" ||
    playerSelection === "scissors" && computerSelection === "paper" ||
    playerSelection === "paper" && computerSelection === "rock" ){ 
    pScore++;
    game();
    return;  
    } else {
    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');
    intro =document.querySelector('.intro');

    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){
            //add .winSection to display winner
            winSection.classList.add('fadeIn');
           
            theWinner.textContent = ("player");
        }
        else if( cScore > pScore ){
            //add .winSection to display winner
            winSection.classList.add('fadeIn');
            
            theWinner.textContent = ("computer");
        }
        else {
            //add .winSection to display winner
           
            winSection.style.display = 'none';

            
        } 
        //Add reset Button
        resetBtn.classList.add('fadeIn');
        resetBtn.addEventListener('click', () => {
           
           
           playGame();
        });
    
    }

}



startGame();
playGame();

body{
    background-color: #844141;
}

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

}
div.fadeOut{
    opacity: 0;
    
}

div.fadeIn, .resetBtn.fadeIn, .theWinner.fadeIn, .winSection.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%;
    
}


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

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

After the game plays 5 rounds and if user decides to press the "play again!!" button I am trying to get the event Listener to call the playGame() function so that the screen is how it looks like on the playGame() function. Any help is appreciated. Also, why doesn't event listener take me back to the playGame() function when it is pressed?

Answer 1

You can just reset all the scores to 0, show all the elements that were on the initial state and hide all others (essentially reverting all changes that were made throughout the game).

resetBtn.addEventListener('click', e => {
  playerScore.textContent = computerScore.textContent = tieScore.textContent = pScore = cScore = tie = 0;
  match.classList.remove('fadeIn');
  winSection.classList.remove('fadeIn');
  resetBtn.classList.remove('fadeIn');
  playBtn.style.display = '';
  rpsBtns.style.display = '';
  displayHolder.style.display = '';
  playerDisplay.textContent = choiceDisplay.textContent = '';
});