Javascript 函数是否像局部变量一样处理全局变量？

当我将所有变量（

box2

，

display

，

total

，

error

）放入函数中时，代码工作，但当我将它们置于函数外部时，代码不工作。我认为这应该是可行的，因为这4个变量都是全局变量，函数必须识别它们（变量）。如果有人能出来解释为什么代码不起作用，我会非常高兴

var-box1=document.getElementById（“box1”）.value；
var box2=document.getElementById（“box2”）.value；
var display=document.getElementById（“display”）；
var总计=编号（第1框）+编号（第2框）；
var error=“输入字段有问题”；
函数cal（）{
如果（！isNaN（框1）和&！isNaN（框2））{
display.innerHTML=“$”+总计；
}否则{
display.innerHTML=错误；
}
}

最佳成瘾计算器
算计
i

问题不在于变量在哪里，而在于设置它们的值时

此代码：

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;
    }
}

---

问题不在于变量在哪里，而在于设置它们的值时

此代码：

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;
    }
}

---

首先是什么让你想把变量移出函数？因为它是和他们一起工作的（他们属于哪里）？嗨。这是因为学习的目的。我被教导全局变量会响应，不管它从哪里调用。谢谢如果下面的答案回答了您的问题，即堆栈溢出的工作方式，您可以通过单击旁边的复选标记来“接受”答案，这就把它从未回答的问题列表中去掉了。但前提是你的问题真的得到了回答；如果没有，你可以在问题中添加更多细节，以澄清你仍然需要回答的问题。我已经知道了。我只是在犹豫是否能得到另一个令人信服的答案。我在这里有点困惑；你的例子对我根本不起作用，先生。请再来解释一下，为什么用外行的话来说它不起作用。非常感谢你！首先是什么让你想把变量移出函数？因为它是和他们一起工作的（他们属于哪里）？嗨。这是因为学习的目的。我被教导全局变量会响应，不管它从哪里调用。谢谢如果下面的答案回答了您的问题，即堆栈溢出的工作方式，您可以通过单击旁边的复选标记来“接受”答案，这就把它从未回答的问题列表中去掉了。但前提是你的问题真的得到了回答；如果没有，你可以在问题中添加更多细节，以澄清你仍然需要回答的问题。我已经知道了。我只是在犹豫是否能得到另一个令人信服的答案。我在这里有点困惑；你的例子对我根本不起作用，先生。请再来解释一下，为什么用外行的话来说它不起作用。非常感谢你！正如T.J.所说，它是关于执行

getElementById

的时间。在文档中出现

box1

、

box2

和

display

元素之前，您似乎正在将JS加载到文档中的某个位置，这就是为什么在全局范围内分配这些元素时，它找不到这些元素，而这些元素在文档中还不存在。如果脚本标记在标记中位于它们的下方，

getElementById

将找到它们。这就是为什么我总是将脚本标记放在文档末尾的原因。@UselessCode:他的脚本可能在元素下面，但在用户输入之前读取值…：-）如果您直接读取

.value

，而不仅仅是缓存DOM节点以备以后使用，则不会起作用。我忘了他在原始代码中是这么做的；我决不会想到要那样做。其中一种情况是按照编写代码的方式来阅读代码，而不是实际存在的代码；-）这就引出了选择好的变量名的重要性。当我看到

box1

时，我假设它包含对名为

box1

的DOM节点的引用，而不是节点的值。如果变量包含该值，像

value1

或

operator 1

这样的名称可能会使代码更可读。@UselessCode:True。正如T.J.所说，它是关于执行

getElementById

的时间。看起来您正在加载JS