如何在 div 中显示计数器变量？

Question

我正在构建石头/剪刀/布，用户可以与计算机对战。我想在每轮之后更新分数并将其显示在 div 内。该代码在第一个分数之后起作用，但在 1 之后不再递增。

let computerPlay = () => {
  let compChoices = ["rock", "paper", "scissors"]; //array storing computer possible actions
  let i = Math.floor(Math.random() * 3);
  let choice = compChoices[i];

  return choice;
};

//select buttons for player choice
let buttons = document.querySelectorAll(".btn");

//select elements for updating scoreboard
let homeScore = document.querySelector(".home-score");
let awayScore = document.querySelector(".away-score");
let display = document.querySelector(".score-board-display");

//declare player and computer score variables
let playerScore, compScore;

//compare player and computer selections update score of winner
let playRound = (playerSelection, computerSelection) => {
  let result = ``;
  playerScore = 0;
  compScore = 0;
  if (playerSelection === computerSelection) {
    result = `Tie ${playerSelection} equals ${computerSelection}`;
  } else if (
    (playerSelection == "rock" && computerSelection == "scissors") ||
    (playerSelection == "paper" && computerSelection == "rock") ||
    (playerSelection == "scissors" && computerSelection == "paper")
  ) {
    result = `LFG!! ${playerSelection} beats ${computerSelection}`;
    playerScore += 1;
    homeScore.innerText = playerScore.toLocaleString();
  } else {
    result = `You Lose! ${computerSelection} beats ${playerSelection}`;
  }

  return (display.innerHTML = result);
};

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    let computerSelection = computerPlay();
    let playerSelection = button.innerHTML.toLowerCase();
    playRound(playerSelection, computerSelection);
  });
});

Answer 1

在每个 playRound 上，playerScore 都会重置/定义为 0，

以解决在 playRound 定义之前将playerScore 定义为数字的问题

...
let playerScore=0;
let playRound = (playerSelection, computerSelection) => {
   ...