Javascript Rock paper scissors game issue

Hi guys, Im following along with a youtube video and keep getting this error where nothing pops up when I click my buttons. Any help? Here is the code and error.

Please post your code instead of a picture. Thanks.

const computerChoiceDisplay = document.getElementById('computer-choice')
const userChoiceDisplay = document.getElementById('user-choice')
const resultDisplay = document.getElementById('result')
const possibleChoices = document.querySelectorAll('button')
let userChoice
let computerChoice
let result

possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener('click', (e) => {
    userChoiceDisplay.innerHTML = userChoice
    userChoice = e.target.id
    generateComputerChoice()
    getResult()
}))

function generateComputerChoice() {
    const randomNumber = Math.floor(Math.random() * 3) + 1 // Or you can use possibleChoices.length


    if (randomNumber === 1) {
        computerChoice = 'rock'
    }
    if (randomNumber === 2) {
        computerChoice = 'scissors'
    }
    if (randomNumber === 3) {
        computerChoice = 'paper'
    }
    computerChoiceDisplay.innerHTML = computerChoice
}


function getResult() {
    if (computerChoice === userChoice) {
        result = 'its a draw!'
    }
    if (computerChoice === 'rock' && userChoice === "paper") {
        result = 'you win!'
    }
    if (computerChoice === 'rock' && userChoice === "scissors") {
        result = 'you lost!'
    }
    if (computerChoice === 'paper' && userChoice === "scissors") {
        result = 'you win!'
    }
    if (computerChoice === 'paper' && userChoice === "rock") {
        result = 'you lost!'
    }
    if (computerChoice === 'scissors' && userChoice === "rock") {
        result = 'you win!'
    }
    if (computerChoice === 'scissors' && userChoice === "paper") {
        result = 'you lose!'
    }
    resultDisplay.innerHTML = result
}

Here is Html code as well.

Rock Paper Scissors Tutorial
<h2>Computer Choice: <span id="computer-choice"></span></h2>
<h2>Your Choice: <span id="your-choice"></span></h2>
<h2>RESULT: <span id="result"></span></h2>

<button id="rock">Rock</button>
<button id="paper">Paper</button>
<button id="scissors">Scissors</button>

<script src="app.js" charset="utf-8"></script>
  1. Check for typos.
<span id="your-choice"></span></h2>
const userChoiceDisplay = document.getElementById('user-choice')
  1. You need to assign a value to userChoice before you set its value on the elements HTML.
// userChoice is undefined here
userChoiceDisplay.innerHTML = userChoice
// and is assign a value here
userChoice = e.target.id

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.