函数是否与局部变量一样适用于全局变量？

Question

当我将所有变量（box2，display，total，error）放入函数中时，代码可以正常工作，但当我将它们放在函数外部时，它没有用。我认为它应该工作，因为所有这4个变量都是全局变量，函数必须识别它们（变量）。如果有人能够出来解释为什么代码不起作用，我会很高兴。

＆＃13;

＆＃13;

var box1 = document.getElementById("box1").value;
var box2 = document.getElementById("box2").value;
var display = document.getElementById("display");
var total = Number(box1) + Number(box2);
var error = "There is a problem with the input fields";


function cal() {
  if (!isNaN(box1) && !isNaN(box2)) {
    display.innerHTML = "$" + total;
  } else {
    display.innerHTML = error;
  }
}

＆＃13;

<h1>Best Addiction Calculator</h1>
<input class="field" placeholder="type first number" type="text" id="box1">
<input class="field" placeholder="type second number" type="text" id="box2">
<button style="font-size:xx-large; color:#860EED" onClick="cal()">Calculate</button>
<p id="display">i</p>

＆＃13;

＆＃13;

＆＃13;

提前谢谢大家！

Answer 1

问题不在于变量，

此代码：

var box1 = document.getElementById("box1").value;
var box2 = document.getElementById("box2").value;

在输入时从读取值。您希望在用户单击按钮时读取其值。

你可以这样做，但这不合理：

// JUST AN EXAMPLE, DON'T ACTUALLY DO IT
var box1;
var box2;
var display;
var total;
var error;

function cal() {
    box1 = document.getElementById("box1").value;
    box2 = document.getElementById("box2").value;
    display = document.getElementById("display");
    total = Number(box1) + Number(box2);
    error = "There is a problem with the input fields";

    if (!isNaN(box1) && !isNaN(box2)) {
        display.innerHTML = "$" + total;
    } else {
        display.innerHTML = error;
    }
}

这表明问题不在于变量所在的位置，而是在设置它们的值时。

但是没有充分理由不会那样做。由于没有理由将这些变量放在函数之外，所以将它们放在函数中。一般来说，给变量一个最窄的范围。

如果查找元素是一项昂贵的操作，您只想做一次（它不是getElementById非常快），您可以查找元素一次，但然后在cal内得到他们的价值：

var box1 = document.getElementById("box1");              // Note no `.value` here
var box2 = document.getElementById("box2");              // Or here
var display = document.getElementById("display");

function cal() {
    var total = Number(box1.value) + Number(box2.value); // Note change on this line
    var error = "There is a problem with the input fields";

    if (!isNaN(box1) && !isNaN(box2)) {
        display.innerHTML = "$" + total;
    } else {
        display.innerHTML = error;
    }
}