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?

Outside the question, but why are you using classes for everything? — TheCoder - or rather ACoder, May 01 '23 at 03:14
lol idk that's just my norm? I know there was probs some that i didn't even use. I am learning :) — garcGut, May 01 '23 at 03:18
Ohh... normally, classes are used when multiple elements have that class. In this case, since most classes only contain one element, I think you should [use ids](https://stackoverflow.com/questions/12889362/what-is-the-difference-between-id-and-class-in-css-and-when-should-i-use-them). But I suppose it works either way, so up to you :) — TheCoder - or rather ACoder, May 01 '23 at 03:23
thank you!! I feel like I'm starting to forget the basics as I'm learning other things hehe — garcGut, May 01 '23 at 03:26

score 1 · Accepted Answer · answered May 01 '23 at 03:13

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 = '';
});

answered May 01 '23 at 03:13

Unmitigated

76,500
11
62
80

See the code working here: https://jsfiddle.net/rh5bfxv2/ – Unmitigated May 01 '23 at 03:16
Thank you! Do you know why I can't call the function playGame() inside event listener? – garcGut May 01 '23 at 03:22
1

@shala It's not so much that you can't call it, but it doesn't reset all the things it should to truly restart the game. And it adds all the event listeners again, so you would get duplicate code running on each click. – Unmitigated May 01 '23 at 03:24

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

1 Answers1