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

JavaScript
1

Hi Guys, When I try and run the function below the scores do not update.

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

But when I swap the order of the code and put the roundResultsMsg.innerText = getRoundResults(userOption); first it works.

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

I do not really understand this because the playerScore and computerScore should have been updated before in the parts of the code that came earlier in the getRoundResults function.

let playerScore = 0;
let computerScore = 0;

function getRoundResults(userOption) {
  const computerResult = getRandomComputerResult();

  if (hasPlayerWonTheRound(userOption, computerResult)) {
    **playerScore++**;
    return `Player wins! ${userOption} beats ${computerResult}`;
  } else if (computerResult === userOption) {
    return `It's a tie! Both chose ${userOption}`;
  } else {
    **computerScore++**;
    return `Computer wins! ${computerResult} beats ${userOption}`;
  }
}

So my main question is why does the first order not work but the second order does ? Why cant roundResultsMsg.innerText = getRoundResults(userOption); come last in the showResults(userOption) function ?

link to challenge

2

Don’t forget to provide a link to the challenge.

Except they get updated right there in the function. By calling getRoundResults , you are updating either the playerScore and computedScore. That’s why you need to update the innerText last.