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>

为什么该变量不能在innerHTML中显示其编号？

3 个答案: