How do add a reset button to a Rock Paper Scissors game?

hbz19 0
Viewed 48

I'm learning JavaScript and having an issue trying to make a reset button for my game. Im assuming the way I have coded it has scope tripping me up. any pointers would help immensely. I have tried but the best i managed was to make the current score say 0 upon clicking the button, but if rock, paper or scissors were selected again, the score would jump straight back to where it was before + the result of the current round.

here is my code:

let userScore = 0;
let computerScore = 0;

let choice = document.querySelector("#selections");
choice.addEventListener("click", event => {
    if (event.target.nodeName == "BUTTON") {
      let playerSelecion = (event.target.textContent);
      let computerSelection = getCompChoice();
      document.getElementById("player").innerHTML = playerSelecion;
      document.getElementById("computer").innerHTML = computerSelection;
      playRound(playerSelecion, computerSelection); 
      }
    });
  
function playRound(playerSelecion, computerSelection) {
    
    if (playerSelecion === computerSelection) {
        document.getElementById("currentRound").innerHTML = ("tie");
    } else if (playerSelecion === "rock" && computerSelection === "scissors") {
        userScore++;
        document.getElementById("currentRound").innerHTML = ("you win rock beats scissors");
    } else if (playerSelecion === "paper" && computerSelection === "rock") {
        userScore++
        document.getElementById("currentRound").innerHTML = ("you win paper beats rock")
    } else if (playerSelecion === "scissors" && computerSelection === "paper") {
        userScore++
        document.getElementById("currentRound").innerHTML = ("you win scissors beats paper")
    } else if (playerSelecion === "paper" && computerSelection === "scissors") {
        computerScore++
        document.getElementById("currentRound").innerHTML = ("you lose scissors beats paper")
    } else if (playerSelecion === "rock" && computerSelection === "paper") {
        computerScore++ 
        document.getElementById("currentRound").innerHTML = ("you lose paper beats rock")
    } else if (playerSelecion === "scissors" && computerSelection === "rock") {
        computerScore++
        document.getElementById("currentRound").innerHTML = ("you lose rock beats scissors")
    } if (userScore >= 5) {
        document.getElementById("result").innerHTML = "You win";
    } else if (computerScore >= 5) {
        document.getElementById("result").innerHTML = "Computer wins";
        }
    document.getElementById("userScore").innerHTML = userScore;
    document.getElementById("compScore").innerHTML = computerScore;
}


function getCompChoice() {
    let a = Math.random();
    if (a < 0.34) {
        return "rock";
    } else if (a <= 0.67) {
        return "paper";
    } else {
        return "scissors";
    }
}```
scope javascript html
2 Answers

I think you want a reset button in your game that should set user and comp score to "0".

You can make a button and add some reset code to that so that when someone clicks on the button the game will reset the user and comp score to "0":

//adding a reset button
<button onclick="reset()">Reset</button>//remember to put () here
//normal function
function reset(){
    document.getElementById("userScore").innerHTML = 0;
    document.getElementById("compScore").innerHTML = 0;
}
//with arrow function
let reset=()=>{
    document.getElementById("userScore").innerHTML = 0;
    document.getElementById("compScore").innerHTML = 0;
}
Rahul Mohanty0

To avoid the previous results to be added with the new score, the scores should be set to 0 in your reset button too.

//create a reset button
 <button onclick="resetScore()"> Reset The Game </button>

//reset function

const reset = () => {
   useScore = 0;
   computerScore = 0;
   document.querySelector("#userScore").innerHTML = userScore;
   document.querySelector("#compScore").innerHTML = computerScore;
}
shovon tanvir0
Related