Step 14

Instead of printing the game state to the console, let's update the application and inject the result into the HTML page.

Here is how the final script.js will look like:

const result = document.getElementById("result");
const message = document.getElementById("message");

const choices = ["rock", "paper", "scissors"];

function play (event) {
  const userChoice = event.target.id;
  message.innerHTML = "You selected " + userChoice + "!" + "<br/>";

  const randomNumber = Math.floor(Math.random() * choices.length);
  const computerChoice = choices[randomNumber];
  message.innerHTML += "The computer chose " + computerChoice + "!";

  if (computerChoice === userChoice) {
    result.innerHTML = "Draw!";
  } else if (computerChoice === "rock" && userChoice === "paper") {
    result.innerHTML = "You win!";
  } else if (computerChoice === "rock" && userChoice === "scissors") {
    result.innerHTML = "You lost!";
  } else if (computerChoice === "paper" && userChoice === "scissors") {
    result.innerHTML = "You win!";
  } else if (computerChoice === "paper" && userChoice === "rock") {
    result.innerHTML = "You lose!";
  } else if (computerChoice === "scissors" && userChoice === "rock") {
    result.innerHTML = "You win!";
  } else if (computerChoice === "scissors" && userChoice === "paper") {
    result.innerHTML = "You lose!";
  }
}

Let's run and the application:

And with that, we are done with the Rock Paper Scissors game!