无法用querySelector显示DOM中计分段落内容的问题排查

核心问题：DOM元素获取时机错误 #

你的脚本放在<body>开头，而<p class="js-score">元素在脚本之后才被浏览器解析。当执行document.querySelector('.js-score')时，该元素还不存在，返回null，自然无法设置其内容。

其他次要问题 #

• pickComputerMove函数中computerMove未声明变量，会污染全局作用域
• 游戏结束后未同步更新页面上的分数显示
• 重置分数按钮只修改了数据，未更新页面显示
• paper分支中结果拼写错误：you loose应为you lose

修复步骤 #

1. 调整脚本执行时机：将脚本移到</body>标签前，确保所有DOM元素都已解析完成
2. 声明局部变量：在pickComputerMove里给computerMove加上let声明
3. 封装分数更新函数：创建统一的更新页面分数的函数，在初始化、游戏结束、重置分数后调用
4. 修正拼写错误：把you loose改成you lose
5. 完善重置按钮逻辑：调用分数更新函数，确保页面同步显示重置后的分数

修改后的完整代码 #

<!DOCTYPE html>
<title>Rock Paper Scissors</title>
<body>
  <button onclick="playGame('rock');">Rock</button>
  <button onclick="playGame('paper');">Paper</button>
  <button onclick="playGame('scissors');">Scissors</button>
  
  <p class="js-score"></p>
  <button onclick="resetScore()">Reset score</button>

  <script>
    let score = JSON.parse(localStorage.getItem('score')) || {
      wins: 0,
      losses: 0,
      Ties: 0
    };

    // 初始化显示分数
    updateScoreDisplay();

    function pickComputerMove() {
      let computerMove; // 声明局部变量
      const randomNumber = Math.random();

      if (randomNumber >= 0 && randomNumber < 1/3) {
        computerMove = 'rock';
      } else if (randomNumber >= 1/3 && randomNumber < 2/3) {
        computerMove = 'paper';
      } else if (randomNumber >= 2/3 && randomNumber < 1) {
        computerMove = 'scissors';
      }

      return computerMove;
    }

    function playGame(playerMove) {
      const computerMove = pickComputerMove();
      let result = '';

      if (playerMove === 'scissors') {
        if (computerMove === 'rock') {
          result = 'you lose';
        } else if (computerMove === 'paper') {
          result = 'you win';
        } else if (computerMove === 'scissors') {
          result = 'Tie';
        }
      } else if (playerMove === 'rock') {
        if (computerMove === 'rock') {
          result = 'Tie';
        } else if (computerMove === 'paper') {
          result = 'you lose';
        } else if (computerMove === 'scissors') {
          result = 'you win';
        }
      } else if (playerMove === 'paper') {
        if (computerMove === 'rock') {
          result = 'you win';
        } else if (computerMove === 'paper') {
          result = 'Tie';
        } else if (computerMove === 'scissors') {
          result = 'you lose'; // 修正拼写错误
        }
      }

      // 更新分数
      if (result === 'you win') {
        score.wins += 1;
      } else if (result === 'you lose') {
        score.losses += 1;
      } else if (result === 'Tie') {
        score.Ties += 1;
      }

      localStorage.setItem('score', JSON.stringify(score));
      // 更新页面分数
      updateScoreDisplay();

      alert(`you picked ${playerMove}, computer picked ${computerMove}, ${result}\nwins: ${score.wins}, losses: ${score.losses}, Ties: ${score.Ties}`);
    }

    // 封装分数更新函数
    function updateScoreDisplay() {
      document.querySelector('.js-score').innerHTML = `wins: ${score.wins}, losses: ${score.losses}, Ties: ${score.Ties}`;
    }

    // 重置分数函数
    function resetScore() {
      score.wins = 0;
      score.losses = 0;
      score.Ties = 0;
      localStorage.removeItem('score');
      updateScoreDisplay();
    }
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Manasa