javascript - .innerHTML 应用于两个 div，而应仅应用于一个

Question

我有一个简单的石头剪刀布游戏，我希望根据用户或计算机是否获胜来将分数计数增加 1。

我面临的问题是当我尝试应用分数时，例如:用户获胜而计算机失败，element.innerHTML 将用户分数和计算机分数都更改为 1。我无法弄清楚这一点，因为用户 html 元素和计算机 html 元素具有不同的 ID，我通过这些来定位它们。

任何建议(希望以上内容有意义:))

let countUser = 0;
let countComp = 0;

const displayScoreUser = document.getElementById("user-score").innerHTML = countUser += 1;
const displayScoreComp = document.getElementById("computer-score").innerHTML = countComp += 1;

if (user_selection === 'rock' && computer_choice === 'scissors') {
  displayScoreUser;
  console.log(displayScoreUser);
  alert('user wins');
} else if (user_selection === 'scissors' && computer_choice === 'paper') {
  displayScoreUser;
  console.log(displayScoreUser);
  alert('user wins');
} else if (user_selection === 'paper' && computer_choice === 'rock') {
  displayScoreUser;
  console.log(displayScoreUser);
  alert('user wins');
} else if (user_selection === 'scissors' && computer_choice === 'rock') {
  displayScoreComp;
  console.log(displayScoreComp);
  alert('computer wins');
} else if (user_selection === 'rock' && computer_choice === 'paper') {
  displayScoreComp;
  console.log(displayScoreComp);
  alert('computer wins');
} else if (user_selection === 'paper' && computer_choice === 'scissors') {
  displayScoreComp;
  console.log(displayScoreComp);
  alert('computer wins');
} else {
  alert('its a draw');
}

<div class="score-row pt-5">
  <div class="score-col item-1">
    <h3>User Score</h3>
    <div class="score-box">
      <h2 id="user-score">0</h2>
    </div>
  </div>
  <div class="score-col item-2">
    <h2 class="display-3">You Win!!</h2>
  </div>
  <div class="score-col item-3">
    <h3>Computer Score</h3>
    <div class="score-box">
      <h2 id="computer-score">0</h2>
    </div>
  </div>
</div>

Answer 1

问题是什么？

displayScoreUser 和 displayScoreComp 不是函数，它们是变量(常量)，如果您在代码中重新输入它们，它不会执行任何操作...而且 user 和 computer 在开始时获得初始点，因为您在开始时分配给它们的值..这是您可以修复它的方法..只需转换您的 displayScoreUser 和 displayScoreComp 到函数中:

解决方案:

function displayScoreUser () {
 countUser++ 
 document.getElementById("user-score").innerHTML = countUser;
 };

 function displayScoreComp () {
 countComp++ 
 document.getElementById("computer-score").innerHTML = countComp;
 };

然后，每当用户或计算机赢得操作时就调用它们:

displayScoreUser () // when user wins
displayScoreComp () // when computer wins