Rock, paper, Scissors Project - help with buttons

Hello,

I have been trying for hours now to make it so that when you click on any of the buttons (rock, paper, scissors) on the page, it would pass on the value of either rock, paper, or scissors, to my variable “userChoice”. I am still very new to javascript so bear in mind that my code could be very wrong. Any help/suggestions would be incredibly appreciated!

Here is my HTML code:

<html>
<head></head>
  <title>Rock, Paper, Scissors</title>
  <link rel="stylesheet" href="styles.css">
  <meta charset="UTF-8"/>
</head>
<h1>Welcome to the Rock, Paper, Scissors Championship!</h1>
<body>

  <div class="selections">
    <div class="rock">
      <input type="image" id="rock" src="/home/johannesvw3/Desktop/web-projects/Rock/images/rock.png">
      <button class="text-rock">ROCK</button>
      <div class="paper">
        <input type="image" id="paper" src="/home/johannesvw3/Desktop/web-projects/Rock/images/paper.png">
        <button class="text-paper">PAPER</button>
        <div class="scissor">
          <input type="image" id="scissors" src="/home/johannesvw3/Desktop/web-projects/Rock/images/scissors.png">
          <button class="text-scissors">SCISSORS</button>
    </div>  
    <div class="scoreboard">Scoreboard
      <div class="user">User:
      <div class="comp">Computer:
    </div>


  <script src="rock.js"></script>
</body>
</html>

and here is my Javascript:

//userChoice
const myButtonRock = document.querySelector('.text-rock');
const myButtonPaper = document.querySelector('.text-paper');
const myButtonScissors = document.querySelector('.text-scissors');

function userChoices() {
  let userChoice = ["rock", "paper", "scissors"];
  return userChoice;
}
  myButtonRock.onclick = function() {
    userChoice('rock');
  }

  myButtonPaper.onclick = function() {
    userChoice('paper');
  }

  myButtonScissors.onclick = function() {
    userChoice('scissors');
  }

  //Computer Choice
  function compChoice() {
    let compChoice = Math.floor(Math.random() * 3);
    if (compChoice == 0) {
      compChoice = "rock";
    } else if (compChoice == 1) {
      compChoice = "paper";
    } else {
      compChoice = "scissors";
    }
    return compChoice
  }

  let userScore = 0;
  let compScore = 0;
  let draws = 0;

  
  function playRound(userChoice, compChoice) {
  
  //Result Messages
    let userWinsRound = "You Win!"
    let compWinsRound = "You Lose :(";
    let draw = "It's a draw";
  
    //Rock Choice
    if (userChoice == "rock" && compChoice == "scissors") {
      alert("user score:" + " " + ++userScore + " " + userWinsRound)
    } else if (userChoice == "rock" && compChoice == "paper") {
      alert("computer score:" + " " + ++compScore + " " + compWinsRound)
    } else if (userChoice == "rock" && compChoice == "rock") {
      alert("draws:" + " " + ++draws + " " + draw)
    }
    //paper Choice
    if (userChoice == "paper" && compChoice == "rock") {
      alert("user score:" + " " + ++userScore + " " + userWinsRound)
    } else if (userChoice == "paper" && compChoice == "scissors") {
      alert("computer score:" + " " + ++compScore + " " + compWinsRound)
    } else if (userChoice == "paper" && compChoice == "paper") {
      alert("draws:" + " " + ++draws + " " + draw)
    }
    //scissors Choice
    if (userChoice == "scissors" && compChoice == "paper") {
      alert("user score:" + " " + ++userScore + " " + userWinsRound)
    } else if (userChoice == "scissors" && compChoice == "rock") {
      alert("computer score:" + " " + ++compScore + " " + compWinsRound)
    } else if (userChoice == "scissors" && compChoice == "scissors") {
      alert("draws:" + " " + ++draws + " " + compWinsRound)
    } else {
      return "Something Went Wrong";
    }
        
    }
    
      while (userScore < 5 && compScore < 5) {
        console.log(playRound(userChoices(), compChoice()));
      }

Hi, when you use myButtonRock.onclick you already know that the userChoice is “rock” and the same with the others buttons, so you can avoid call the function userChoice().

you can have a global variable when you save the user choice

let userChoice
myButtonPaper.onclick = function() {
      userChoice="paper";
 }

in this way you can acces the userChoice in every part of the code but its hard to know when you have to call playRound (its has to be called only when the user makes a choice)

If you already have the choice you can call playRound inside the buttons.onclick function

  myButtonPaper.onclick = function() {
      playRound('paper',compChoice());
   }

in this way each time you press a button is a round.

you mus replace the part

 while (userScore < 5 && compScore < 5) {
        console.log(playRound(userChoices(), compChoice()));
  }

this part loops calling userChoice that doesnt care about the user pressing the buttons, and doesnt stop. You can add a function that checks if the game is over and call it only when you press a button, avoiding the infinite loops.

If you dont undertand a part or i dont answer your question ask again.

Hope this will help.

1 Like

Wow thanks a lot! this has helped a great deal and now my buttons actually work! I will now work on creating a new function to check when the game is over.

Cheers!

1 Like