How to end eventListener with a condition

1

Hello! I am doing the rock, paper, scissors project and I want to end the program when a player or a computer reaches five points and put a “Play Again” button. I tried to use removeEventListener but couldn’t do it.

<body>
<div id="container">
    <button id="rock">rock</button>
    <button id="paper">paper</button>
    <button id="scissors">scissors</button>
</div>

<script>
function computerPlay(){
    let options=["rock","paper","scissors"];
    return options[Math.floor(Math.random()*options.length)];
}




function playRound(playerSelection,computerSelection) {

   if ((playerSelection==="rock" && computerSelection==="scissors") ||
      (playerSelection==="scissors" && computerSelection==="paper") ||
      (playerSelection==="paper" && computerSelection==="rock")) {

      return "You win";
   }

   else if ((playerSelection==="scissors" && computerSelection==="rock") ||
           (playerSelection==="paper" && computerSelection==="scissors") ||
           (playerSelection==="rock" && computerSelection==="paper")) {

       return "Computer wins";
   }

   else if (playerSelection===computerSelection) {

        return "Draw";
   }
}


let computer=0;
let player=0;
let buttons = document.querySelectorAll("button");
buttons.forEach((button) => {
    button.addEventListener("click", (e)=>{

        let computerSelection=computerPlay();
        let result=playRound(e.target.id,computerSelection);
        const outcomes=document.createElement("div");
        outcomes.classList.add("outcomes");
        container.appendChild(outcomes);

        if (result==="You win") {
            player+=1;
        }

        else if(result==="Computer wins") {
            computer+=1;
        }

        outcomes.textContent=result;

        if (player===5){
            outcomes.textContent+= "You are the winner";
            player=0;
            computer=0;

            let playAgain=document.createElement("button");
            playAgain.textContent="Play Again";
            playAgain.classList.add("playAgain");
            container.appendChild(playAgain);
            playAgain.addEventListener("click",(e)=>{
                document.location.reload();})


        }else if(computer===5){
            outcomes.textContent+="Computer is the winner";
            player=0;
            computer=0;
            let playAgain=document.createElement("button");
            playAgain.textContent="Play Again";
            playAgain.classList.add("playAgain");
            container.appendChild(playAgain);
            playAgain.addEventListener("click",(e)=>{
                document.location.reload();})

        }

    });
});

</script>
</body>
2

You can do this if you hide rock paper scissors buttons when player=5 or computer=5 i.e.

        if (player===5){
            outcomes.textContent+= "You are the winner";
            player=0;
            computer=0;
			document.getElementById("rock").style.display="none";
			document.getElementById("paper").style.display="none";
			document.getElementById("scissors").style.display="none";
            let playAgain=document.createElement("button");
            playAgain.textContent="Play Again";
            playAgain.classList.add("playAgain");
            container.appendChild(playAgain);
            playAgain.addEventListener("click",(e)=>{
                document.location.reload();})


        }else if(computer===5){
            outcomes.textContent+="Computer is the winner";
            player=0;
            computer=0;
			document.getElementById("rock").style.display="none";
			document.getElementById("paper").style.display="none";
			document.getElementById("scissors").style.display="none";
            let playAgain=document.createElement("button");
            playAgain.textContent="Play Again";
            playAgain.classList.add("playAgain");
            container.appendChild(playAgain);
            playAgain.addEventListener("click",(e)=>{
                document.location.reload();})

        }
1 Like
3

You could refactor this down into one if “player or computer ==5” and just change the outcomes.textContent+= line since everything else is the same.

But, to answer your main question;

you could change:

to something like:
document.querySelectorAll(".outcomes").forEach(i => i.remove());})

You’d need to clean some more things up. And hiding the buttons as mentioned above is a great idea!

1 Like
4

Thank you so much guys!

5