Javascript：为什么变量只能在本地工作而不能在全局工作_Javascript_Variables_Global_Local

Javascript：为什么变量只能在本地工作而不能在全局工作

javascript variables

Javascript：为什么变量只能在本地工作而不能在全局工作,javascript,variables,global,local,Javascript,Variables,Global,Local,我是JavaScript新手，很难理解为什么变量可以在函数内部（本地）而不是外部（全局）声明时使用例如：或者如果在这里更容易查看。为什么这会起作用 function numDisplay (){ var e = document.getElementById("numVal").value; document.getElementById("show").innerHTML = e; } document.getElementById("calcBtn").addEventListener

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

例如：

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

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

为什么这行不通呢

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

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

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

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

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

var number_of_puffins = 11;

如果希望变量指向文档的一部分，则需要在页面存在后使用函数对其进行设置

<body onLoad="setglobals();">

使用类似示例的代码时要小心，因为如果添加或删除项目，页面可能会更改。

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

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

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

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

var number_of_puffins = 11;

如果希望变量指向文档的一部分，则需要在页面存在后使用函数对其进行设置

<body onLoad="setglobals();">

使用类似示例的代码时要小心，因为如果添加或删除项目，页面可能会更改。

这两个选项都按计划工作

差异就是价值

当您第一次运行脚本时，输入中没有值，但是当您在函数中运行脚本时，它总是有值的

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

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

这两个选项都按计划工作

差异就是价值

当您第一次运行脚本时，输入中没有值，但是当您在函数中运行脚本时，它总是有值的

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

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

在下列情况下：

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

在以下情况下：

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

当

是全局变量时，函数

numDisplay（）

无法正常工作，因为单击

\calcBtn

时会触发

numDisplay（）

假设您在输入字段中输入数字5，然后单击“显示数字”按钮。这将运行

numDisplay（）

，并将

#show

中的HTML设置为

。然而，

从未得到数字5。它仍然有一个在加载页面时分配给它的空值。为了让它在每次单击按钮时不断获取新值，

var e=document.getElementById（“numVal”）.value

需要在函数内部。

当