Javascript: 为什么变量会在局部而不是全局工作

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

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

区别在于价值

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

调用值时可以更改，即：

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

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

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

Javascript: 为什么变量会在局部而不是全局工作

Javascript: why will variable work locally but not globally

javascript

variables

global

local