JavaScript中if语句与变量重复声明错误求助

为什么会出现这些错误？ #

• 你在多个按钮的onclick属性里用const/let声明了同名变量（比如randomNumber、computerMove、result），但onclick里的代码是运行在全局作用域中的。const和let不允许在同一作用域下重复声明变量，所以点击不同按钮时就会触发重复声明的错误。
• 另外你的Paper按钮代码里还有笔误：声明了computerMove却误用computerMove2，result2写成了resul2，这些会导致运行时找不到变量的错误。

怎么解决？ #

最规范的做法是把游戏逻辑抽离成独立函数，不要把代码直接写在onclick属性里，这样变量都是函数内部的局部变量，不会产生冲突，代码也更易维护。

重构后的完整代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Rock Paper Scissors</title>
  </head>
  <body>
    <p>Rock Paper Scissors</p>

    <button onclick="playGame('rock')">Rock</button>
    <button onclick="playGame('paper')">Paper</button>
    <button onclick="playGame('scissors')">Scissors</button>

    <script>
      function playGame(userMove) {
        // 生成电脑出拳
        const randomNumber = Math.random();
        let computerMove = '';

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

        // 判断胜负
        let result = '';
        if (userMove === computerMove) {
          result = 'Tie.';
        } else if (
          (userMove === 'rock' && computerMove === 'scissors') ||
          (userMove === 'paper' && computerMove === 'rock') ||
          (userMove === 'scissors' && computerMove === 'paper')
        ) {
          result = 'You win.';
        } else {
          result = 'You lose.';
        }

        alert(`You picked ${userMove}. Computer picked ${computerMove}. ${result}.`);
      }
    </script>
  </body>
</html>

重构的好处： #

• 所有变量都在playGame函数内部，属于局部作用域，不会和其他代码冲突
• 逻辑复用：不用重复写三次生成电脑出拳、判断胜负的代码
• 代码更简洁，容易修改和调试

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