Why won't this variable display its number in its innerHTML?

Question

This is part of a basic rock paper scissors game. I declared a few counter variables that increase as each click on an option executes. When I console.log the score values, they do increase, but the innerHTML won't display that increase. I do not think I am declaring the innerHTML as the variable correctly. (Also, the HTML is correct because any other string in the innerHTML declaration works.)

var playerscore = 0;
var computerscore = 0;

document.getElementById('cpuscore').innerHTML = computerscore;
document.getElementById('playerscore').innerHTML = playerscore;



rock.addEventListener("click", function() {
    let computerSelection = computerPlay();
  let game = playRound(computerSelection, 'Rock');
    if (game === 'tie') {
        document.getElementById('result').innerHTML = 'Tie!';
  } else if (game === 'player') {
        document.getElementById('result').innerHTML = 'You win!';
        playerscore++;
  } else {
        document.getElementById('result').innerHTML = 'You lose!';
      computerscore++;
  }
  }
);

Answer 1

You need to update the innerHTML whenever you update the variable. They're not automatically sync'ed.

 rock.addEventListener("click", function() { let computerSelection = computerPlay(); let game = playRound(computerSelection, 'Rock'); if (game === 'tie') { document.getElementById('result').innerHTML = 'Tie!'; } else if (game === 'player') { document.getElementById('result').innerHTML = 'You win!'; playerscore++; document.getElementById('playerscore').innerHTML = playerscore; } else { document.getElementById('result').innerHTML = 'You lose!'; computerscore++; document.getElementById('cpuscore').innerHTML = computerscore; } }); 

Answer 2

When you use the assignment operator to set the innerHTML of a DOM element, it's simply a one-time update. It does not cause the innerHTML to reference a value which can be updated. So in addition to setting the innerHTML to the scores at the beginning, you will have to do it every time the scores change.

As an aside, you may have thought otherwise from having had interaction with many modern reactive frameworks that abstract this away and do it for you through a Virtual DOM generating view-function

Answer 3

If you want the page to show the new scores every time they are changed, you'll need to update the DOM every time you change the scores. In other words, put your ...innerHTML = {score} code inside your event handler.

Here's a quick demo:

 var playerscore = 0; var computerscore = 0; // display initial scores document.getElementById('cpuscore').innerHTML = computerscore; document.getElementById('playerscore').innerHTML = playerscore; document.getElementById('run').addEventListener("click", function() { // ... game logic here ... if (Math.random() > .5) computerscore++ else playerscore++; // display updated scores document.getElementById('cpuscore').innerHTML = computerscore; document.getElementById('playerscore').innerHTML = playerscore; }); 

 <div>CPU Score: <span id="cpuscore"></span></div> <div>Player Score: <span id="playerscore"></span></div> <button id="run">Run</button>