Question

我是JavaScript的新手，我很难理解为什么变量可以在函数内部（本地）声明但不在外部（全局）声明时使用。

例如：https://jsfiddle.net/Buleria28/kqu69aqt/

或者如果在这里查看更容易。为什么这会起作用？：

function numDisplay (){
var e = document.getElementById("numVal").value;
document.getElementById("show").innerHTML = e;
}

document.getElementById("calcBtn").addEventListener("click",numDisplay);

为什么这不起作用？：

var e = document.getElementById("numVal").value;
function numDisplay (){
document.getElementById("show").innerHTML = e;
}

document.getElementById("calcBtn").addEventListener("click",numDisplay);

相应的HTML是：

<form method = "POST">
<fieldset>          
<label for="numVal">Enter Number Value:</label>
<input type="number" id="numVal" name="numVal"/>
</fieldset>
</form>

我很好奇，因为我想在不同的函数中使用变量“e”中的用户输入。

Answer 1

问题是脚本代码运行时。如果你设置一个这样的全局变量，它是null

var e = document.getElementById("numVal").value;

然后它可能在浏览器创建该部分页面之前执行。

您可以使用您设置为数字或字符串的全局变量，因为它不依赖于页面/文档：

var number_of_puffins = 11;

如果您希望变量指向文档的一部分，则需要在页面存在后设置一个函数来设置它。

<body onLoad="setglobals();">

请注意使用类似示例的代码，因为如果添加或删除项目，页面可能会发生变化。

Answer 2

您的两个选项都按计划运行。

差异在于价值。

当你第一次运行脚本时，输入中没有值，但是当你在函数内部运行它时，alredy就有了值。

您可以在调用该值时进行更改，即：

var e = document.getElementById("numVal"); //Remove the .value
/*why won't having the variable above rather than inside
the function work?*/

function numDisplay (){
//var e = document.getElementById("numVal").value;
document.getElementById("show").innerHTML = e.value; //use it here.
}

document.getElementById("calcBtn").addEventListener("click",numDisplay);

Answer 3

以下情况：

var e = document.getElementById("numVal").value;
function numDisplay (){
   document.getElementById("show").innerHTML = e;
}
document.getElementById("calcBtn").addEventListener("click",numDisplay);

e在运行时计算，因此该值为空，然后存储为e（您的起始值）。但是，对代码进行细微更改可以使其工作。

var e = document.getElementById("numVal");
function numDisplay (){
   document.getElementById("show").innerHTML = e.value;
}
document.getElementById("calcBtn").addEventListener("click",numDisplay);

在此示例中，每次单击都会找到e的值，然后显示当前值并将其设置为“show”元素的innerHTML。

Answer 4

当numDisplay()是全局变量时，函数e无效，因为点击numDisplay()时会触发#calcBtn。

假设您在输入字段中输入数字5，然后单击“显示数字”按钮。这会运行numDisplay()并将#show中的HTML设置为e。但是，e从未得到数字5.它仍然具有一个空值，当您加载页面时，该值已分配给它。为了在每次单击按钮时不断获取新值，var e = document.getElementById("numVal").value;需要在函数内部。

Javascript：为什么变量在本地工作但不是全局工作

4 个答案: