Javascript：为什么变量会在本地工作而不是全局工作答案

【问题标题】：Javascript: why will variable work locally but not globallyJavascript：为什么变量会在本地工作而不是全局工作
【发布时间】：2017-11-12 13:25:45
【问题描述】：

我是 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”中找到的用户输入。

【问题讨论】：

标签： javascript variables global local

【解决方案1】：

如果是：

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 的值，然后会显示当前值并将其设置为“显示”元素的 innerHTML。

【讨论】：

【解决方案2】：

问题在于脚本代码何时运行。如果你设置一个像这样的全局变量并且它是空的

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

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

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

var number_of_puffins = 11;

如果你想让一个变量指向文档的一部分，你需要有一个函数在页面存在后设置它。

<body onLoad="setglobals();">

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

【讨论】：

【解决方案3】：

您的两个选项都按计划工作。

区别在于价值。

第一次运行脚本时，输入中没有值，但在函数内部运行时，它已经有值了。

你可以在调用值时改变，即：

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

【讨论】：

【解决方案4】：

e 为全局变量时，numDisplay() 函数无法正常工作，因为在单击 #calcBtn 时会触发 numDisplay()。

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

【讨论】：