Rock, Paper, Scissors Project (Odin Project) - Buttons Help

JavaScript
1

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()));
          }
2

Your selectors are looking for ids, but your buttons don’t have ids

3

Thanks for pointing out my error! I went back and corrected it (I think) but it still does not work. Are you able to spot any other mistakes I might have?

4

I don’t see userChoice declared anywhere, but you treat it as both a function and a variable in various places.

5

I declared userChoice inside the function userChoices on the sixth line, does that not work?

6

That variable only exists inside the userChoices function. (And even if it was global, it is an array, but later you call it as a function and then later you compare it strings.)

7

Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://www.freecodecamp.org/learn.

8

Awesome, I will definitely check that out! Thanks for all your help!