Javascript：为什么变量在本地工作但不是全局工作
[英]Javascript: why will variable work locally but not globally
问题描述
I am new to JavaScript and am having trouble understanding why a variable can be used when it is declared inside a function (locally) but not outside (globally). 
我是JavaScript的新手，我很难理解为什么变量可以在函数内部（本地）声明但不在外部（全局）声明时使用。
For example: https://jsfiddle.net/Buleria28/kqu69aqt/ 例如： https ： //jsfiddle.net/Buleria28/kqu69aqt/
Or if it is easier to view here. 或者如果在这里查看更容易。 Why will this work?: 这为什么会这样？
function numDisplay (){
var e = document.getElementById("numVal").value;
document.getElementById("show").innerHTML = e;
}
document.getElementById("calcBtn").addEventListener("click",numDisplay);
And why won't this work?: 为什么这不起作用？：
var e = document.getElementById("numVal").value;
function numDisplay (){
document.getElementById("show").innerHTML = e;
}
document.getElementById("calcBtn").addEventListener("click",numDisplay);
The corresponding HTML is: 相应的HTML是：
<form method = "POST">
<fieldset>
<label for="numVal">Enter Number Value:</label>
<input type="number" id="numVal" name="numVal"/>
</fieldset>
</form>
I am curious because I would like to use the user input for found in the variable "e" in different functions. 我很好奇，因为我想在不同的函数中使用变量“e”中的用户输入。
4 个解决方案
解决方案1
0 2017-06-10 17:46:33
The problem is when the script code runs. 问题是脚本代码运行时。 If you set a global variable like this and it is null 如果设置这样的全局变量，则它为null
var e = document.getElementById("numVal").value;
Then it probably executed before the browser created that part of the page. 然后它可能在浏览器创建该部分页面之前执行。
You can use global variables that you set to a number or string that way since that does not depend on the page / document: 您可以使用您设置为数字或字符串的全局变量，因为它不依赖于页面/文档：
var number_of_puffins = 11;
If you want a variable to point to a part of the document you need to have a function to set it after the page exists. 如果您希望变量指向文档的一部分，则需要在页面存在后设置一个函数来设置它。
<body onLoad="setglobals();">
Be careful about using code like your example since the page can change if you add or delete items. 请注意使用类似示例的代码，因为如果添加或删除项目，页面可能会更改。
解决方案2
0 2017-06-10 17:47:11
Both of your options work as planned. 您的两个选项都按计划运行。
The difference is the value. 不同之处在于价值。
When you run the script for the first time, there is no value in the input, but when you run it inside the function, it alredy has value. 当您第一次运行脚本时，输入中没有值，但是当您在函数内部运行它时，它会有值。
You can change when you are calling the value, ie: 您可以在调用值时进行更改，即：
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);
解决方案3
0 已采纳 2017-06-10 17:47:27
In the case of: 如果是：
var e = document.getElementById("numVal").value;
function numDisplay (){
document.getElementById("show").innerHTML = e;
}
document.getElementById("calcBtn").addEventListener("click",numDisplay);
e is computed at run time, so the value is nothing which is then stored as e (your starting value.) However making a slight change to your code can make this work. e是在运行时计算的，因此该值不是任何值，然后存储为e（您的起始值）。但是对代码进行轻微更改可以使其工作。
var e = document.getElementById("numVal");
function numDisplay (){
document.getElementById("show").innerHTML = e.value;
}
document.getElementById("calcBtn").addEventListener("click",numDisplay);
In this example e's value is found on each click, which will then display the current value and set that as the innerHTML of your 'show' element. 在此示例中，每次单击都会找到e的值，然后显示当前值并将其设置为“show”元素的innerHTML。
解决方案4
0 2017-06-10 17:49:35
The function numDisplay() doesn't work correctly when e is a global variable because numDisplay() is triggered when #calcBtn is clicked. 该功能numDisplay()时无法正常工作e是一个全局变量，因为numDisplay()时被触发#calcBtn被点击。
Let's say you enter the number 5 in the input field and click the "Show Number" button. 假设您在输入字段中输入数字5，然后单击“显示数字”按钮。 This runs numDisplay() and sets the HTML in #show to e . 这将运行numDisplay()并将#show的HTML设置为e 。 However, e never got the number 5. It still has an empty value which was assigned to it when you loaded the page. 然而， e从来没有数5.还有，当你加载的网页，其中分配给它一个空值。 For it to keep getting new values each time you click the button, var e = document.getElementById("numVal").value; 为了在每次单击按钮时继续获取新值， var e = document.getElementById("numVal").value; needs to be inside the function. 需要在函数内部。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.