HELP! Web Development Tutorial - Rock Paper Scissors Game

I’ve been following this awesome tutorial to create a Rock Paper Scissors game:


but I’m stuck at 59:15. I’ve written the same exact code as him up to this point but the scores do not increment. What could be wrong?

Not sure if this will help but:

  • I’m currently using Brackets
  • In the .js file, I keep getting a weird error: “ERROR: Parsing error: The keyword const is reserved”
  • I’m saving all my files in a folder on my desktop called “rock-paper-scissors”
  • Here is my script tag: <script src="app.js" charset="utf-8"></script>

I saved my code here in CodePen: https://codepen.io/24days1/pen/JjjVBzX

Does anyone know what’s wrong?

Did you check your browser’s console? I see a Reference error there. In your game function, you reference a variable named compChoice, but you have not defined what compChoice is.

FYI - Leaving all the code in place down to the getComputerChoice function, you could rewrite the remaining code using the following. It makes the code DRY (Do Not Repeat Yourself).

function updateScores() {
  userScore_span.innerHTML = userScore;
  compScore_span.innerHTML = compScore;
}

function updateMessage(msg) {
  result_div.innerHTML = msg;
}

function game(userChoice) {
  const computerChoice = getComputerChoice();
  switch (userChoice + computerChoice) {
    case "rockscissors":
    case "paperrock":
    case "scissorspaper":
      updateScores(userScore++); 
      updateMessage(userChoice + " beats " + computerChoice + ". You win.");
      break;
    case "scissorsrock":
    case "rockpaper":
    case "paperscissors":
      updateScores(compScore++); 
      updateMessage(computerChoice + " beats " + userChoice + ". You lose.");
      break;
    default:
      updateMessage(userChoice + " vs. " + computerChoice + ". It's a draw.");
  }
}

function main() {
  rock_div.addEventListener("click", game.bind(null, "rock"));
  paper_div.addEventListener("click", game.bind(null, "paper"));
  scissors_div.addEventListener("click", game.bind(null, "scissors"));
}

main();

I didn’t do the DRY method but I realized it work after I filled in the lose() and draw() functions. You were very helpful thank you!