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>
- Check for typos.
<span id="your-choice"></span></h2>
const userChoiceDisplay = document.getElementById('user-choice')
- 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.