How do I restart variables in javascript so when I press the playAgainBtn button the game will restart all the variables so the game restarts?

Question

I am trying to reset the variables in my code which is javascript so when I press the playAgainBtn button it will restart my variables. Right now when I press the playAgainBtn the game continues using the same values for the variables.

The code can be viewed at this link: https://studio.code.org/projects/applab/-Nj1Z6FPRpBe5AozECuNfBgHFqIzzt6-I6eJSJwJG-8

onEvent("playAgainBtn", "click", function() {
  console.log("playAgainBtn clicked!");
  setScreen("gamePlay_screen");
});

var randButtonId;
//var buttonId;
var currentPlayer = 1;
var p1Score=0;
var p2Score=0;
setBoard();
//checkCorrect(randButtonId);
function setBoard() {

  var r = (randomNumber(0, 255));
  var g = (randomNumber(0, 255));
  var b = (randomNumber(0, 255));
  var color = rgb(r, g, b);
  setProperty("button1", "background-color", color);
  setProperty("button2", "background-color", color);
  setProperty("button3", "background-color", color);
  setProperty("button4", "background-color", color);

  var diffColor = rgb(r+40, g+40, b+40);
  randButtonId = "button"+randomNumber(1,4);
  setProperty(randButtonId, "background-color", diffColor);
  console.log("correct one is: " + randButtonId);
}

onEvent("button1", "click", function(){
      console.log("Checking: "+randButtonId);
      checkCorrect("button1");
  });

  onEvent("button2", "click", function(){
      checkCorrect("button2");
      console.log("Checking: "+randButtonId);
  });
  onEvent("button3", "click", function(){
      checkCorrect("button3");
      console.log("Checking: "+randButtonId);
  });
  onEvent("button4", "click", function(){
      checkCorrect("button4");
      console.log("Checking: "+randButtonId);
  });
      setBoard();

  function checkCorrect(buttonId){
      console.log("Checking: "+randButtonId);
      if(buttonId == randButtonId ) {
        console.log("You got it right!");
        updateScoreBy(1);
    } else {
        console.log("WRONG");
        updateScoreBy(-3);
    }
      checkGameOver();
      setBoard();
      switchPlayer();
  }

   function switchPlayer(){
     if(currentPlayer==1){
         currentPlayer=2;
     } else {
         currentPlayer=1;
     }
     console.log("current player is: "+currentPlayer);
     if(currentPlayer==1){
       showElement("player1_highlight");
       hideElement("player2_highlight");
     }else{
       showElement("player2_highlight");
       hideElement("player1_highlight");
     }
 }

 function updateScoreBy(amt){
     if(currentPlayer == 1){
         p1Score = p1Score + amt;
     } else {
         p2Score = p2Score + amt;
     }
     console.log("P1 score: " + p1Score);
     console.log("P2 score: " + p2Score);
     setText("score1_label", p1Score);
     setText("score2_label", p2Score);
 }
 function checkGameOver(){
 if(p1Score == 10){
   setScreen("gameOver_screen");
   showElement("player1Win_label");
   hideElement("player2Win_label");
 }
  else if(p2Score == 10){
    setScreen("gameOver_screen");
    showElement("player2Win_label");
    hideElement("player1Win_label"); 
   }
 }

Answer 1

You can create a new function that resets your variables.

function resetBoard() {
  currentPlayer = 1;
  p1Score = 0;
  p2Score = 0;
}

Then on your event you can call that function

onEvent("playAgainBtn", "click", function() {
  console.log("playAgainBtn clicked!");
  resetBoard();
  setScreen("gamePlay_screen");
});

I was unable to test on that website so please let me know if this does not work for you.