How to make my rock, paper, scissors game refresh on button click?

Question

This is not a duplicate because window.load() refreshes after 3 seconds without letting the user see the result fully

What I want to do is have the game reset automatically when the user clicks another button to make a new choice without having to refresh the page to click a "reset" button.

Would this involve clearing the innerHTMLs and resetting the variables onclick before running the script again?

My code is here: http://jsbin.com/yuvalucupo/edit?html,css,js

//var rock = document.getElementById("rock");
//var paper = document.getElementById("paper");
//var scissors = document.getElementById("scissors");

var screen = document.getElementById("screen");
var compAnswer = Math.random();

//Set computer value
if (compAnswer >= 0 && compAnswer <= 0.33) {
  compAnswer = "rock";
} else if (compAnswer >= 0.34 && compAnswer <= 0.66) {
  compAnswer = "paper";
} else {
  compAnswer = "scissors";
}

function result(choice1, choice2) {
  if (choice1 === choice2) {
    screen.innerHTML = "<p>It's a tie!</p>";
  }
  //Rock Start  
  else if (choice1 === "rock" && choice2 === "scissors") {
    screen.innerHTML = "<p>Rock Wins!</p>";
  } else if (choice1 === "rock" && choice2 === "paper") {
    screen.innerHTML = "<p>Paper Wins!</p>";
  }
  //End Rock

  //Paper Start
  else if (choice1 === "paper" && choice2 === "scissors") {
    screen.innerHTML = "<p>Scissors Wins!</p>";
  } else if (choice1 === "paper" && choice2 === "rock") {
    screen.innerHTML = "<p>Paper Wins</p>!";
  }
  //Paper End

  //Scissors Start
  else if (choice1 === "scissors" && choice2 === "paper") {
    screen.innerHTML = "<p>Scissors Wins</p>";
  } else if (choice1 === "scissors" && choice2 === "rock") {
    screen.innerHTML = "<p>Rock Wins</p>";
  }
  //Scissors End
}
//Display Computer's Answer
function displayCompAnswer() {
  var computer = document.getElementById("computerAnswer");
  computer.innerHTML = compAnswer;
}

#screen, #computerAnswer {
  height: 100px;
  width: 250px;
  background-color: lightgrey;
  border: 1px solid black;
}

<div id="screen"></div>
<button id="rock" onclick="userAnswer = 'rock'; result(userAnswer, compAnswer); displayCompAnswer();">Rock</button>
<button id="paper" onclick="userAnswer = 'paper'; result(userAnswer, compAnswer); displayCompAnswer();">Paper</button>
<button id="scissors" onclick="userAnswer = 'scissors'; result(userAnswer, compAnswer); displayCompAnswer();">Scissors</button>
<div id="computerAnswer"></div>

Possible duplicate of [Refresh browser window using JS](http://stackoverflow.com/questions/19791148/refresh-browser-window-using-js) — Cruiser, Aug 25 '16 at 17:57
*"This is not a duplicate because window.load() refreshes after 3 seconds"*: it is a duplicate. You have of course to put that call at the right place. There is no link between that method and *3 seconds*. You determine upon which (button) event you call it. — trincot, Aug 25 '16 at 18:28

TxRegex · Answer 1 · 2016-08-25T18:54:50.950

You might do something like this to "reset" your game:

function clearMessage(event) {
    event.preventDefault();  // Stops the page from refreshing
    var screen = document.getElementById("screen");
    screen.innerHTML = '';
}

Then you could have a reset button like this

<button onclick="clearMessage(event)">Reset</button>

Here are some other thoughts as I look over your code. See how each function does only one thing?

// input: 0 = rock, 1 = paper and 2 = scissors
function makeUserSelection(choice) {
    var computerChoice = getCompAnswer();
    var result = getResult(choice, computerChoice);
    displayResult(result);
}

// output: 0 = rock, 1 = paper and 2 = scissors
function getCompAnswer() {
    var rand = Math.random();
    if (compAnswer <= 0.33) {
        return 0;
    }

    return (compAnswer <= 0.66) ? 1 : 2;
}

// input: 0 = rock, 1 = paper and 2 = scissors
// output: 0 = draw, 1 = user wins and -1 = user loses.
function getResult(userValue, computerValue) {
    if(userValue === computerValue) {
        return 0; // draw
    }
    return ((userValue + 1) % 3 === computerValue) ? return -1 : 1;
}

displayMessage(message) {
    var screen = document.getElementById('screen');
    screen.innerHTML = '<p>' + message + '</p>';
}

function displayResult(result) {
    messages = ["It's a draw", "You lose", "You win"];
    displayMessage(messages[result]);
}

Here is how I would update the buttons:

<div id="screen"></div>
<button id="rock" onclick="makeUserSelection(0);">Rock</button>
<button id="paper" onclick="makeUserSelection(1);">Paper</button>
<button id="scissors" onclick="makeUserSelection(2);">Scissors</button>
<button id="reset" onclick="clearMessage(event);">Reset</button>
<div id="computerAnswer"></div>

How to make my rock, paper, scissors game refresh on button click?

1 Answers1