[英]Javascript: why will variable work locally but not globally
我是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”中的用户输入。
问题是脚本代码运行时。 如果设置这样的全局变量，则它为null
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").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()时无法正常工作e是一个全局变量，因为numDisplay()时被触发#calcBtn被点击。
假设您在输入字段中输入数字5，然后单击“显示数字”按钮。 这将运行numDisplay()并将#show的HTML设置为e 。 然而， e从来没有数5.还有，当你加载的网页，其中分配给它一个空值。 为了在每次单击按钮时继续获取新值， var e = document.getElementById("numVal").value; 需要在函数内部。
变量只能在函数中本地运行，而不能在全局中运行-Javascript
[英]Variables Only Work Locally in a Function, Not globally - Javascript
为什么我的 addEventListener function 为变量在本地而不是全局赋值？
[英]Why does my addEventListener function assign a value to a variable locally, but not globally?
为什么我的变量在Javascript / Jquery中不全局可用？
[英]Why isn't my variable available globally in Javascript / Jquery?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.