Rock, paper scissors game not logging

Hello. I’m going through a rock paper scissors game and its going really well, but I’m stuck on getting an updated player choice to post to the console. Its a code along but I’m learning and I’m doing what the instructor said to do. But my code still isn’t showing up.

Here is the link to my code. Please take a look.
https://replit.com/@DanielPetroski/Rock-Paper-and-Scissors#script.js

Thank you

The property/attribute is onclick not onClick

As an aside, I would suggest using addEventListener


I moved your thread to the JS section.

1 Like

Thank you. It was a better spot for it anyway.

Are you kidding me??! lol. A ‘c’ needs to be ‘C’ ?? Well seeing as how, both from people looking at my code on this site and my own errors, upper and lower case as well as plural and singular matching is consistently showing up as an issue for me. Which is good considering I guess those are pretty minor issues.

Also, maybe its just me but I wish it were onClick instead lol. I’m so used to camel case.

The devil is in the details, especially with code. Typos and small errors like this will continue to haunt you it’s just a matter of learning to debug them quickly.

You can always switch to React then, lol. It uses camelCase.

1 Like

This is all true and good foundational advice. Also I didn’t know that regarding React. Also, also, for Qazi (the instructor I’m following along) he uses onClick and it works fine for him. So, I don’t know.

In React, it is onClick. In vanilla JavaScript, it is onclick.

Game update:

The game is nearly finished and can be played and display the basics. But I’m having an issue w/ the innerText data because it’s displaying/grabbing the computerChoice but not the playerChoice and posting it to the screen.

I think I have playerChoice missing somewhere earlier in the code. Or it isn’t in the right place.

https://replit.com/@DanielPetroski/Rock-Paper-and-Scissors

I have had a look at your code. I don’t have much experience coding but try using this code snippet in your showResult() function.

if (score == -1) {
    resultDiv.innerText = 'You lose'
  } else if (score == 0) {
    resultDiv.innerText = 'Its a tie'
  } else {
    resultDiv.innerText = 'You win!'
  }
handsDiv.innerText = `${playerChoice} vs ${computerChoice}`
  }

I suggest two changes:

  1. placing playerChoice in {} instead of ().
  2. placing handsDiv.innerText outside the else loop.

[Mod edit: edited for readability]

It is not $(playerChoice), it should be ${playerChoice} inside the template literal.

One bug I notice, is until the player wins a game, it does not show the X vs Y text. Once the player gets a win, then it does show that text. It is because you need to move:

handsDiv.innerText = `${playerChoice} vs ${computerChoice}`

outside the last else.

Thanks for the advice. What do you mean by x vs y text?

Cool. Do you recommend #1 because it creates an object that organizes it?

It isn’t an object, it is an template literal

This is jQuery

$()

This is a plain JS template literal

`${someVariable}`

I assume X vs Y just refers to Player Choice vs Computer Choice

Game update: I have almost finished the game. There is one more feature to add that isn’t working for me for some reason even though I’m doing it the same as the instructor.

Here it is. He is adding a little emoji for the player and the bot. He added them in Replit (whic h is the website I’m coding this in) by adding in :person for the human/player. And :robot for the bot icon. I tried and it here is what I get…

So I’m curious on not only why this is happening but if there is honestly a better way to handle this. For design purposes.

game update:

So I finished the code but it isn’t giving me a result after I moved the results variables to the end game function at the bottom of the screen. I did exactly what the person in the video was doing, and the game isn’t even working now. Not sure what I did.

Here is the updated game link