javascript - 如何解决比较变量时它在 JavaScript 中变为未定义的问题？

Question

我正在创建一个小游戏来测试我的 JavaScript 技能。出于某种原因，我无法弄清楚，当我比较变量 iron 和变量 drill 时，drill 变得未定义，并列为 NaN 在我的网页中。

我在 repl.it 上使用 Javascript 和 HTML。我觉得这可能是我的 If 语句的问题，但如果这是问题的根源，我不确定如何解决它们。此外，变量 iron 和 drill 默认设置为 0。

  if (iron < drillPrice) {
    alert("Not enough iron");
  }
  if (iron >= drillPrice) {
    drill = drill + 1;
    tempDrills = drill
    iron = iron - drillPrice;
    document.getElementById('drillsOwned').innerHTML = drill;
    iron = Math.round(iron * 10) / 10;
    document.getElementById('ironOwned').innerHTML = iron;
    drillPrice = Math.floor(100 * Math.pow(1.1, drill));
    document.getElementById("drillPrice").innerHTML = drillPrice;
  }
}

完整的回复在这里:https://repl.it/@Munix/factory

如果变量 iron 高于变量 drillPrice 的预期输出，它应该使 drill 更高，在这种情况下使 drill 等于 1。实际发生的是 drill 变成了 undefined。如果变量 iron 低于 drillPrice，它应该显示测试 Not enough iron，并且不要触摸变量 drill。实际发生的是它显示测试 Not enough iron，但将 drill 设置为 undefined。

Answer 1

问题是这部分代码:

function randomEvent() {
  var event = Math.random();
  event = Math.round(event * 10);
  if (event <= 9) {
    document.getElementById("event").innerHTML = "No event today!";
    drill = tempDrills
  }
  if (event == 10) {
    var eventFlavor = 'You have iron deficiency! 1/2 iron from drills for the rest of the day!';
    document.getElementById("event").innerHTML = eventFlavor;
    var tempDrills = drill;
    drill = drill / 2;
  }
}

我们在这里看到的是如何在 javascript 中创建变量的示例: var tempDrills = drill; 变量的声明被提升到函数的顶部，所以它基本上看起来像这样:

function randomEvent() {
  var event = Math.random();
  var tempDrills;
  ...
}

所以变量被提升并且不会被设置为 drill 的值，除非你足够幸运在启动时掷出十分之一。所以 tempDrills 是一个在其他 9 种情况下未定义值的局部变量，解释了将 drill 设置回 tempDrills 后的行为。

解决方案是简单地删除 var 关键字，因此您使用全局变量代替。然后它按我的预期工作。