'getResult is Undefined

I can't seem to find out what is creating this undefined error in my basic rock paper scissor game it gives me to results instead of just one I'm trying to understand javascript its just taking me time to really grasp the in and outs of it if anyone can solve this for me and explain where I went wrong I'd really appreciate it

<!DOCTYPE html>
    <head>
        <title>Rock, Paper, Scissors</title>
        <link rel="stylesheet" type="text/css" href="./css/reset.css">
        <link rel="stylesheet" type="text/css" href="./css/style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    </head>

    <body>
        <h2>User Choice:    <span id="user-choice"></span></h2>
        <h2>Computer Choice:    <span id="computer-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="rock.js"></script>
    </body>
</html>

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(possibleChoices => possibleChoices.addEventListener('click', (e) => {
    userChoice = e.target.id
    userChoiceDisplay.innerHTML = userChoice
    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 (userChoice === 'rock' && computerChoice === 'paper') {
        result = 'you win!'
    }
    if (userChoice === 'scissor' && computerChoice === 'rock') {
        result = 'you win!'
    }
    if (userChoice === 'paper' && computerChoice === 'scissors') {
        result = 'you win!'
    }
    if (userChoice === 'rock' && computerChoice === 'scissors') {
        result = 'you lost!'
    }
    if (userChoice === 'scissors' && computerChoice === 'paper') {
        result = 'you lost!'
    }
    if (userChoice === 'paper' && computerChoice === 'rock') {
        result = 'you lost!'
    }
    if (userChoice === computerChoice) {
        result = `its a draw!`
    }
    resultDisplay.innerHTML = result
    console.log(getResult)
}


Solution 1:[1]

The conditions inside the getResult() function never gets true because the string values compared inside if conditions doesn't match.

The string value equaled to userChoice is lowercase and the string value which you actually get through userChoice is Title case(First letter capital). So the strings doesn't match and result variable never gets assigned. Hope this helps!

function getResult() {
if (userChoice == 'Rock' && computerChoice == 'paper') {
    result = 'you win!';
}
if (userChoice == 'Scissors' && computerChoice == 'rock') {
    result = 'you win!'
}
if (userChoice == 'Paper' && computerChoice == 'scissors') {
    result = 'you win!'
}
if (userChoice == 'Rock' && computerChoice == 'scissors') {
    result = 'you lost!'
}
if (userChoice == 'Scissors' && computerChoice == 'paper') {
     result = 'you lost!'
}
if (userChoice == 'Paper' && computerChoice == 'rock') {
     result = 'you lost!'
}
if (userChoice == computerChoice) {
     result = 'its a draw!'
}
resultDisplay.innerHTML = result
console.log(getResult)

}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ishark Felician