ARTICLE AD BOX
I am building a simple Rock Paper Scissors game using HTML and JavaScript. I have my JavaScript logic inside an inline onclick attribute on a <button>.
When I try to output the result using an alert() and a template literal, my ${result} variable doesn't seem to render properly depending on the text I put around it.
If I use this code:
alert(`You picked Rock. Computer picked ${computerMove} . ${result}`);The popup only says: "You picked Rock. Computer picked paper." (The ${result} is completely missing).
However, if I change the text inside the alert to this:
alert(`You picked Rock. Computer picked ${computerMove} & The result is ${result}`);It works perfectly and outputs: "You picked Rock. Computer picked paper & The result is You lose."
Why is the variable being dropped in the first example? Here is my full code for context:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rock Paper Scissors</title> </head> <body> <h1>Rock Paper Scissors</h1> <button onclick=" const randomNumber = Math.random(); let computerMove = ''; if (randomNumber >= 0 && randomNumber < 1/3) { computerMove = 'Rock'; } else if (randomNumber >= 1/3 && randomNumber < 2/3) { computerMove = 'Paper'; } else if (randomNumber >= 2/3 && randomNumber < 1) { computerMove = 'Scissor'; } let result = ''; if (computerMove === 'Rock') { result = 'Tie.'; } else if (computerMove === 'Paper') { result = 'You lose'; } else if (computerMove === 'Seissors') { result = 'You won'; } alert(`You picked Rock. Computer picked ${computerMove} . ${result}`); "> Rock </button> <button>Paper</button> <button>Scissors</button> </body> </html>