Rock Paper Scissors not working properly JS-CodePudding

I can only seem to get 2 outcomes when player selects rock or scissors. Wont always run on click. Very buggy and slow. Check out the site and the code and let me know what yall think is up. My first script project so it ain't pretty.

Edit: changed num === from 123 to 012 still wont work

https://duskope.github.io/rockpaperscissors/

https://github.com/Duskope/rockpaperscissors/blob/main/index.js

let resultDisplay = document.getElementById('result')

let userChoice
let compChoice
let result

document.getElementById('rock').addEventListener('click', (e) => {
  userChoice = 'rock'
  genCompChoice()
  getResult()

})
document.getElementById('paper').addEventListener('click', (e) => {
  userChoice = 'paper'
  genCompChoice()
  getResult()
})
document.getElementById('scissors').addEventListener('click', (e) => {
  userChoice = 'scissors'
  genCompChoice()
  getResult()
})

function genCompChoice() {
  let num = Math.floor(Math.random() * 3)

  if (num === 0) {
    compChoice = 'rock'
  }
  if (num === 1) {
    compChoice = 'paper'
  }
  if (num === 2) {
    compChoice === 'scissors'
  }
}

function getResult() {
  if (userChoice === compChoice) {
    result = 'Draw. You both suck.'
  }
  if (userChoice === 'rock' && compChoice === 'paper') {
    result = 'Paper beats rock. You lose.'
  }
  if (userChoice === 'rock' && compChoice === 'scissors') {
    result = 'Rock beats scissors. You win.'
  }
  if (userChoice === 'paper' && compChoice === 'rock') {
    result === 'Paper beats rock. You win.'
  }
  if (userChoice === 'paper' && compChoice === 'scissors') {
    result = 'Scissors beats paper patrick. You lost nerd.'
  }
  if (userChoice === 'scissors' && compChoice === 'rock') {
    result = 'Rock beats scissors. Are you even trying?'
  }
  if (userChoice === 'scissors' && compChoice === 'paper') {
    result = 'Scissors beats paper. You win.'
  }
  resultDisplay.innerHTML = result
}

<div  id="title">
  <h1 >Rock Paper Scissors</h1>
</div>
<div  id="desc">
  <h2>Choose your weapon</h2>
</div>
<div  id="weaponsgrid">
  <div  id="rock">
    <p >Rock</p><img src="/rockpaperscissors/images/bbaeb9dc-f31f-498b-8183-2073e1361f49-1656364575448.jpg" alt="Rock" >
  </div>
  <div  id="paper">
    <p >Paper</p><img src="/rockpaperscissors/images/paper.png" alt="Paper" >
  </div>
  <div  id="scissors">
    <p >Scissors</p><img src="images/scissors.jpeg" alt="Scissors" >
  </div>
</div>
<div  id="resultDisplay">
  <span id="result"></span>
</div>
<div  id="footer">from Daddy Duskope</div>

CodePudding user response：

This

function genCompChoice() {
  let num = Math.floor(Math.random() * 3)
  if (num === 1) {
    compChoice = 'rock'
  }
  if (num === 2) {
    compChoice = 'paper'
  }
  if (num === 3) {
    compChoice === 'scissors'
  }
}

is a problem. Math.random generates a random number between 0 and 1 (exclusive), so Math.random() * 3 is between 0 and 3 (exclusive), so Math.floor(Math.random() * 3) is an integer between 0 and 2 (inclusive).

If that number is 0, it doesn't enter into any of the branches in genCompChoice, and compChoice remains at its previous value.

If the number is 1 or 2, either rock or paper will be assigned. The number will never be 3.

So you need

function genCompChoice() {
  const num = Math.floor(Math.random() * 3)
  if (num === 0) {
    compChoice = 'rock'
  }
  if (num === 1) {
    compChoice = 'paper'
  }
  if (num === 2) {
    compChoice = 'scissors'
  }
}

(Make sure to assign with compChoice = 'scissors' - don't compare with ===)