Javascript JS-石头剪刀游戏（全球范围vs本地范围）

如果我将var computer和var status都设置为全局范围，但它适用于var humanResult&computerResult，有人能解释为什么游戏不起作用吗

var humanResult = 0;
var computerResult = 0;
var status = document.getElementById("status");
var computer = (Math.floor( Math.random() * 3 ) + 1);

//Click on Rock, Paper, Scissors

document.getElementById('rock').onclick = clickRock;
document.getElementById('paper').onclick = clickPaper;
document.getElementById('scissors').onclick = clickScissors;

function clickRock() {
    // var computer = (Math.floor( Math.random() * 3 ) + 1);
    // status = document.getElementById("status");
    console.log(computer);
    if (computer  == 1) {
    status.innerHTML = "You played rock. The bot played rock you tied. :|"
    };

    if (computer  == 2) {
        computerResult++;
        status.innerHTML = "You played rock. The bot played paper you lose. :(";
    };

    if (computer  == 3) {
        humanResult++;
        status.innerHTML = "You played rock. The bot played scissors you win. :)";
    }

    document.getElementById('humanScore').innerHTML = humanResult;
    document.getElementById('computerScore').innerHTML = computerResult;
}

*我将整套代码放在codepen上供您查看：

v1（完美工作）：

v2（不工作）：

---

非常感谢你的帮助

当您将

status

div声明为全局变量时，它不会更新的原因是，对于浏览器，全局对象

window

已经具有属性

窗口。状态

是特殊的，用于在浏览器底部的中设置状态文本。大多数现代浏览器不再显示状态栏，但处理状态栏的API仍然存在

由于状态文本只能是字符串，因此当您

var status=document.getElementById（“status”）

在全局上下文中，DOM节点在设置为

window.status

之前被强制为字符串。因此，

window.status

包含字符串

“[object htmldevelment]”

，而不是DOM节点

设置字符串的

.innerHTML

属性没有任何作用。要解决这个问题，只需将全局

status

变量重命名为其他变量，例如

gameStatus

，等等

另一种防止这种情况的方法是完全不使用任何全局变量，方法是将所有代码包装到

我也会尝试去除一些冗余代码，很多东西可以抽象成可重用的函数。每当您发现自己复制和粘贴大块代码时，尝试找出如何将代码抽象到另一个函数中通常是有回报的，这将为您节省大量的维护时间和精力，并为您添加做大致相同事情的新功能

我会将此代码重构为如下内容：

（函数（）{
var-humanResult=0，
计算机结果=0，
选项=[‘石头’、‘布’、‘剪刀’]，
状态=document.getElementById（“状态”），
humanScore=document.getElementById（'humanScore'），
computerScore=document.getElementById（'computerScore'），
updateCores=函数（）{
humanScore.innerHTML=humanResult；
computerScore.innerHTML=计算机结果；
},
makeChoser=函数（播放器）{
返回函数（）{
var结果，
计算机=Math.floor（Math.random（）*3）；
如果（计算机===播放器）{
结果='并列：|'；
}否则{
如果（计算机

---

这几乎是代码行数的一半，并将所有评分逻辑保留在一个位置，如果出现错误，您只需进行故障排除并修复一个位置，而不是三个位置。

据我所知，这两个链接都有效。非常感谢您的详细解释和建议代码，真的帮了我大忙！

(function () {
  var humanResult = 0;
  var computerResult = 0;
  var status = document.getElementById("status");

  //Click on Rock, Paper, Scissors

  document.getElementById('rock').onclick = clickRock;
  document.getElementById('paper').onclick = clickPaper;
  document.getElementById('scissors').onclick = clickScissors;

  function clickRock() {
    var computer = (Math.floor( Math.random() * 3 ) + 1);

    if (computer  == 1) {
      test.innerHTML = "You played rock. The bot played rock you tied. :|"
    };

    if (computer  == 2) {
      computerResult++;
      status.innerHTML = "You played rock. The bot played paper you lose. :(";
    };

    if (computer  == 3) {
      humanResult++;
      status.innerHTML = "You played rock. The bot played scissors you win. :)";
    }

    document.getElementById('humanScore').innerHTML = humanResult;
    document.getElementById('computerScore').innerHTML = computerResult;
  }

  function clickPaper() {
     var computer = (Math.floor( Math.random() * 3 ) + 1),

    if (computer  == 1) {
      status.innerHTML = "You played paper. The bot played paper you tied. :|"
    };

    if (computer  == 2) {
      computerResult++;
      status.innerHTML = "You played paper. The bot played scissors you lose. :(";
    };

    if (computer  == 3) {
      humanResult++;
      status.innerHTML = "You played paper. The bot played rock you win. :)";
    }

    document.getElementById('humanScore').innerHTML = humanResult;
    document.getElementById('computerScore').innerHTML = computerResult;
  }

  function clickScissors() {
    var computer = (Math.floor( Math.random() * 3 ) + 1),

    if (computer  == 1) {
      status.innerHTML = "You played scissors. The bot played scissors you tied. :|"
    };

    if (computer  == 2) {
      computerResult++;
      status.innerHTML = "You played scissors. The bot played rock you lose. :(";
    };

    if (computer  == 3) {
      humanResult++;
      status.innerHTML = "You played scissors. The bot played rock you win. :)";
    }
    document.getElementById('humanScore').innerHTML = humanResult;
    document.getElementById('computerScore').innerHTML = computerResult;
  }
}());

(function () {
  var humanResult = 0,
    computerResult = 0,
    choices = ['rock', 'paper', 'scissors'],
    status = document.getElementById("status"),
    humanScore = document.getElementById('humanScore'),
    computerScore = document.getElementById('computerScore'),
    updateScores = function () {
      humanScore.innerHTML = humanResult;
      computerScore.innerHTML = computerResult;
    },
    makeChoser = function (player) {
      return function () {
        var result,
          computer = Math.floor(Math.random() * 3 );

        if (computer === player) {
          result = 'tied :|';
        } else {
          if (computer < player && !(computer === 0 && player === 2)) {
            result =  'win :)';
            humanResult++;
          } else {
            result = 'lose :(';
            computerResult++;
          }
        }

        status.innerHTML = 'You played ' + choices[player] + '. The bot played ' + choices[computer] + ' you ' + result;

        updateScores();
      };
    };

  document.getElementById('rock').onclick = makeChoser(0);
  document.getElementById('paper').onclick = makeChoser(1);
  document.getElementById('scissors').onclick = makeChoser(2);
}());