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

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";
    }
}```

CodePudding user response：

//so i think you want a reset button to your game . and that button should make your game to user score and comp score to "0".

//so you can make a button and add some reset code to that so that when someone click 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;
}

CodePudding user response：

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;
}