Javascript、Chrome 无法识别函数外部的变量

Question

希望你一切都好!!

最近我按照 YouTube 上的教程创建了这个计算器。您可以在下面看到我将所有变量放在函数外部。在 Firefox 中工作正常，但如果我使用 Google Chrome 并尝试使用它，则会得到 NaN 的结果......我通过在函数内移动 var 修复了此错误，但我不明白为什么Chrome 我必须把它移到里面，而 Firefox 不行......

如果有人能给我一个解释，我将非常感激!

谢谢!!!

var value1 = parseInt(document.querySelector("#textbox1").value);
var value2 = parseInt(document.querySelector("#textbox2").value);
var operator = document.querySelector("#operators").value;
var total = document.getElementById("total");
var calculate;

function result() {
  if (operator === "add") {
    calculate = value1 + value2;
  } else if (operator === "sub") {
    calculate = value1 - value2;
  } else if (operator === "multiply") {
    calculate = value1 * value2;
  } else if (operator === "divide") {
    calculate = value1 / value2;
  }
  total.innerHTML = calculate;
}

<form>
  <input type="text" id="textbox1">
  <input type="text" id="textbox2"><br>
  <select id="operators">
    <option value="add">Add</option>
    <option value="sub">Sub</option>
    <option value="multiply">Multiply</option>
    <option value="divide">Divide</option>

  </select>
  <input type="button" id="confirm" value="Result" onclick="result()">
  <div id="total"></div>
</form>

Answer 1

问题是您在页面加载时在用户填写值之前立即获取这些值。 (你说过它在 Firefox 中“工作”。它不适合我，但如果你启用了自动填充，它可能会填充以前运行的值。)

相反，获取result函数内的值:

var total = document.getElementById("total");

function result() {
  var value1 = parseInt(document.querySelector("#textbox1").value);
  var value2 = parseInt(document.querySelector("#textbox2").value);
  var operator = document.querySelector("#operators").value;
  var calculate;

  if (operator === "add") {
    calculate = value1 + value2;
  } else if (operator === "sub") {
    calculate = value1 - value2;
  } else if (operator === "multiply") {
    calculate = value1 * value2;
  } else if (operator === "divide") {
    calculate = value1 / value2;
  }
  total.innerHTML = calculate;
}

<form>
  <input type="text" id="textbox1">
  <input type="text" id="textbox2"><br>
  <select id="operators">
    <option value="add">Add</option>
    <option value="sub">Sub</option>
    <option value="multiply">Multiply</option>
    <option value="divide">Divide</option>

  </select>
  <input type="button" id="confirm" value="Result" onclick="result()">
  <div id="total"></div>
</form>