Review DOM Manipulation by Building a Rock, Paper, Scissors Game - Step 4

JavaScript
1

Tell us what’s happening:

I have searched the forum and according to the answers given, this should work. Not sure why it isn’t…

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
// User Editable Region

const playerScoreSpanElement = document.getElementById("player-score");
const computerScoreSpanElement = document.getElementById("computer-score");
const roundResultsMsg = document.getElementById("results-msg");

function showResults(userOption) {
  playerScoreSpanElement.innerText = playerScore;
  computerScoreSpanElement.innerText = computerScore;
  roundResultMsgElement.innerText = getRoundResults(userOption);
};

showResults("Rock");

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

Review DOM Manipulation by Building a Rock, Paper, Scissors Game - Step 4

1 Like
2

The hint is telling you what is wrong. Have you compared the name of the variable that the hint is telling you about with the one you used in your code? Do they match?

3

The hint says " Your showResults function should update the roundResultsMsg with the result of the round." I tried adding an s I realised was missing in the roundResultsMsgElement.innerHTML but alas, its still not working

4

check the line where that variable is defined, where is it?

5

Interesting, tackled that, now it says to update the elements to show the the updated scores…

6

what changes did you do? what’s your latest code?

7 

const playerScoreSpanElement = document.getElementById("player-score");
const computerScoreSpanElement = document.getElementById("computer-score");
const roundResultsMsg = document.getElementById("results-msg");

function showResults(userOption) {
  playerScoreSpanElement.innerText = playerScore;
  computerScoreSpanElement.innerText = computerScore;
  roundResultsMsg.innerText = getRoundResults(userOption);

};

showResults("Rock");
8

which function changes computerScore and playerScore?

9

you mean playerScoreSpanElement.innerText = playerScore; &
computerScoreSpanElement.innerText = computerScore; ?

10

Hi there!

You have updated the innerText of computerScore and playerScore. But you aren’t updated that variables to the initial value, before updating the innerText.
hint: check the variables declaration lines , where you declared it both the first time.

11

What do you mean by updating the values to the initial value

1 Like
12

No, I mean there is a function that has computerScore++ and playerScore++ inside. If that happens after these lines

then the score shown on the page is not the updated one

13

so how do we make it the updated one

14

what function has inside computerScore++ and playerScore++?

15

getRoundResults

16

and you are calling that here. It needs to happen before you do

3 Likes
18

Actually you re calling getRoundResults in roundResultMsgElement at the end.
that function update scores so what you re doing here is setting innerhtml of player score computer score before updating them. you should update roundResultMsgElement first then update user and computer score.

2 Likes
19

Thanks for the help!

20

hey @iamlamino your response was really helpful. I had the same exact issue, my code was identical, and tried troubleshooting before i read through the entire thread to see if i could figure it out by myself. It made sense once you cued the order!! thank you so much!

21

Thanks, it was the order i had wrote the lines, your hint was very spot on!