為什么此變量不能在innerHTML中顯示其編號？

Question

這是基本的石頭剪刀布游戲的一部分。 我聲明了一些計數器變量，這些變量在每次執行選項時都會增加。 當我console.log得分值時，它們確實增加了，但是innerHTML不會顯示該增加。 我認為我沒有正確地將innerHTML聲明為變量。 （此外，HTML是正確的，因為innerHTML聲明中的任何其他字符串都可以使用。）

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

每當您更新變量時，都需要更新innerHTML 。 它們不會自動同步。

 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

使用賦值運算符設置DOM元素的innerHTML時，它只是一次更新。 它不會導致innerHTML引用可以更新的值。 因此，除了在開始時將innerHTML設置為分數之外，每次分數變化時都必須這樣做。

順便說一句，您可能會想到與許多現代的反應式框架進行交互，而這些框架將其抽象化並通過生成視圖功能的虛擬DOM為您完成

Answer 3

如果您希望頁面在每次更改時顯示新的分數，則每次更改分數時都需要更新DOM。 換句話說，將您的...innerHTML = {score}代碼放入事件處理程序中。

這是一個快速演示：

 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>