I'm building a rock, paper, scissors game - cannot make a variable increment after if statement is true

Question

I am making rock, paper, scissors game. I can't make 'yourScore' and 'computerScore' increment after true if statements. Everything else works. I've been trying different variations for the last 2 hours.

let CPUchoice = []
let gameResult = document.getElementById('game-result');

let yourScore = 0;
let computerScore = 0;

function computerChoice() {
    const picks = ['rock', 'paper', 'scissors'];
    CPUchoice = picks[Math.floor(Math.random()*picks.length)];
}

function rock() {
    computerChoice();
        if (CPUchoice === 'rock') {
            gameResult.textContent = "Computer chose rock, It's a draw!";
            } else if (CPUchoice === 'paper') {
                computerScore = computerScore++;
            gameResult.textContent = "Computer chose paper, you lost!";
            
            } else {
                yourScore = yourScore++;
            gameResult.textContent = "Computer chose scissors, you won!";
            }
}

function paper() {
    computerChoice();
        if (CPUchoice === 'paper') {
            gameResult.textContent = "Computer chose paper, It's a draw!";
            } else if (CPUchoice === 'scissors') {
            gameResult.textContent = "Computer chose scissors, you lost!"
            computerScore++;
            } else {
            gameResult.textContent = "Computer chose rock, you won!"
                yourScore ++;

            }
}
function scissors() {
        computerChoice();
        if (CPUchoice === 'scissors') {
            gameResult.textContent = "Computer chose scissors, It's a draw!";
            } else if (CPUchoice === 'rock') {
            gameResult.textContent = "Computer chose rock, you lost!"
            computerScore++;
            } else {
            gameResult.textContent = "Computer chose paper, you won!"
            yourScore ++;
            }
}

document.getElementById('your-score').textContent = 'Your score is... ' + yourScore;
document.getElementById('computer-score').textContent = 'Computer score is ....' + computerScore;

I have tried many variations of putting the .textContent method in the beginning, in the end. In the code there are 2 versions of incrementing the variable.

Answer 1

First, the last two lines (document.getElementById...) of your code is only executed once, i.e. when the script itself is loaded into the browser. What you should do is to update the textContents whenever the scores change. The = sign here means a one-time assignment: assign the right hand side value to the left hand side variable. It doesn't mean the values on both sides are equal from thereon (sometimes this can be effectively true, but that's because of references. See this post about differences between a reference and a primitive value).

The simpliest fix is to put them in a function:

function updateScores() {
  document.getElementById('your-score').textContent = 'Your score is... ' + yourScore;
  document.getElementById('computer-score').textContent = 'Computer score is ....' + computerScore;
}

... and execute this function whenever you increment computerScore and yourScore.

Other fixes include using reactive programming libraries and even using modern web frameworks, but those are too much of an overkill for this simple game.

Second, score = score++ is basically a no-op. score++ is equivalent to:

function incrementScore() {
  const oldVal = score;
  score++;
  return oldVal;
}

And score = score++ means you're assigning the oldVal to score again. The fix is to change those lines to score++ (eliminating score = ).