DOM元素更新缓慢：初学者石头剪刀布游戏点击响应异常求助

问题分析 #

你的代码核心问题是未处理平局场景：当玩家与电脑选择的武器相同时，没有任何代码更新DOM中的武器显示文本，也不会改变分数。快速点击时，概率上容易连续出现平局，导致页面看起来"没反应"。此外，原代码的胜负判断分支重复冗余，也增加了维护成本。

修复后的代码 #

JavaScript 代码

const weapons = document.querySelectorAll(".weapons__img");
const playerWeaponSpan = document.getElementById("playerWeapon");
const computerWeaponSpan = document.getElementById("computerWeapon");
const playerScoreSpan = document.getElementById("playerScore");
const computerScoreSpan = document.getElementById("computerScore");

let playerScore = 0;
let computerScore = 0;

// 简化电脑武器生成逻辑，更直观易读
const getComputerWeapon = function() {
  const weaponList = ["rock", "scissors", "paper"];
  return weaponList[Math.floor(Math.random() * weaponList.length)];
};

weapons.forEach((weapon) => {
  weapon.addEventListener("click", () => {
    const playerWeapon = weapon.id;
    const computerWeapon = getComputerWeapon();

    // 优先更新武器显示，确保每次点击都有视觉反馈
    playerWeaponSpan.textContent = playerWeapon.charAt(0).toUpperCase() + playerWeapon.slice(1);
    computerWeaponSpan.textContent = computerWeapon.charAt(0).toUpperCase() + computerWeapon.slice(1);

    // 合并胜负判断逻辑，减少冗余
    const isPlayerWin = 
      (playerWeapon === "paper" && computerWeapon === "rock") ||
      (playerWeapon === "scissors" && computerWeapon === "paper") ||
      (playerWeapon === "rock" && computerWeapon === "scissors");
    
    const isComputerWin = 
      (playerWeapon === "paper" && computerWeapon === "scissors") ||
      (playerWeapon === "scissors" && computerWeapon === "rock") ||
      (playerWeapon === "rock" && computerWeapon === "paper");

    if (isPlayerWin) {
      playerScore++;
    } else if (isComputerWin) {
      computerScore++;
    }
    // 平局时不修改分数

    // 更新分数显示
    playerScoreSpan.textContent = playerScore;
    computerScoreSpan.textContent = computerScore;
  });
});

HTML 代码

<header class="header">
  <h1 class="header__heading">Welcome to Rock-Paper-Scissors Game</h1>
  <p>In order to win you need to score up to 5 points</p>
  <p>Pick one of three weapons:</p>
</header>
<main class="main">
  <section class="weapons">
    <div class="weapons__images">
      <img src="https://mgarcia-rps.netlify.app/Paper_1.png" alt="Image #1" id="paper" class="weapons__img" />
      <img src="https://mgarcia-rps.netlify.app/Scissors_1.png" alt="Image #2" id="scissors" class="weapons__img" />
      <img src="https://mgarcia-rps.netlify.app/Rock_1.png" alt="Image #3" id="rock" class="weapons__img" />
    </div>
  </section>
  <section class="score">
    <div class="score__text">
      <div class="score__numbers">
        <p>
          Player <span id="playerScore">0</span> &mdash;
          <span id="computerScore">0</span> Computer
        </p>
      </div>

      <div class="score__weapons">
        <p>Player's Weapon: <span id="playerWeapon">?</span></p>
        <p>Computer's Weapon: <span id="computerWeapon">?</span></p>
      </div>
    </div>
  </section>
</main>

关键修复点 #

• 强制视觉反馈：将武器显示更新逻辑移到胜负判断之前，确保每次点击都能看到当前选择的武器，消除"无响应"的错觉
• 简化随机逻辑：用数组随机索引替代原有的1-15区间判断，代码更简洁且概率分布一致
• 重构判断逻辑：合并相同结果的胜负条件，减少冗余代码，提升可读性
• 明确平局处理：即使平局不修改分数，也保证武器显示正常更新

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