如何在 JavaScript 中定义一个可以在所有函数中访问的全局变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8894342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to define a global variable in JavaScript that can be accessed in all the functions
提问by Mori
Here's a sample form:
这是一个示例表单：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample form</title>
<script type="text/javascript">
function displayResult() {
alert(document.myForm.myInput.value);
}
function getFocus() {
if (document.myForm.myInput.value == document.myForm.myInput.defaultValue) {
document.myForm.myInput.value = "";
}
}
function loseFocus() {
if (document.myForm.myInput.value == "") {
document.myForm.myInput.value = document.myForm.myInput.defaultValue;
}
}
</script>
</head>
<body>
<form name="myForm" method="get" onsubmit="return false;" action="">
<input name="myInput" value="Hello world!" onfocus="getFocus();" onblur="loseFocus();"><br>
<input type="button" onclick="displayResult();" value="Display input value">
</form>
</body>
</html>
It works with no problem, but the following doesn't although the variable xseems right:
它可以正常工作，但尽管变量x似乎正确，但以下内容却没有：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample form</title>
<script type="text/javascript">
var x = document.myForm.myInput;
function displayResult() {
alert(x.value);
}
function getFocus() {
if (x.value == x.defaultValue) {
x.value = "";
}
}
function loseFocus() {
if (x.value == "") {
x.value = x.defaultValue;
}
}
</script>
</head>
<body>
<form name="myForm" method="get" onsubmit="return false;" action="">
<input name="myInput" value="Hello world!" onfocus="getFocus();" onblur="loseFocus();"><br>
<input type="button" onclick="displayResult();" value="Display input value">
</form>
</body>
</html>
What's wrong with it and how can I define a global variable to be used by all the functions?
它有什么问题，我如何定义一个供所有函数使用的全局变量？
采纳答案by Rich O'Kelly
Your variable x is assigned the document.myForm.myInputvalue before the DOM is ready.
You could place the script after your form and myInput elements have been declared, set the script to run in the onload event, or use jQuery's on document ready support (other js libraries offering similar support are available).
你的变量 xdocument.myForm.myInput在 DOM 准备好之前被赋值。您可以在声明表单和 myInput 元素之后放置脚本，将脚本设置为在 onload 事件中运行，或者在文档就绪支持上使用 jQuery（提供类似支持的其他 js 库可用）。
Option 1:
选项1：
<body>
<form name="myForm">
<input name="myInput"> ...
</form>
<script>
...
</script>
</body>
Option 2:
选项 2：
window.onload = function(){
var x = document.myForm.myInput;
...
};
Option 3:
选项 3：
(function($) {
$(function() {
var x = document.myForm.myInput;
...
});
}(window.jQuery));
回答by gion_13
To make a variable visible in all scopes, you should declare it in the most global scope :
要使变量在所有范围内可见，您应该在最全局的范围内声明它：
<script>
var variableName;
</script>
or you could pin it to the global context (window) :
或者您可以将其固定到全局上下文（窗口）：
window['variableName'] = value;
Your code doesn't work because of the fact that when x is being defined, the form is not available, which means that you assign nothing to the variable.
You should wrap your initialization in an event handler for the onload event:
您的代码不起作用，因为在定义 x 时，表单不可用，这意味着您没有为变量分配任何内容。
您应该将初始化包装在 onload 事件的事件处理程序中：
window.onload = function(){
window.x = document.myForm.myInput;
};
or
或者
var x;
window.onload = function(){
x = document.myForm.myInput;
};
回答by Jan P?schko
Your JavaScript code runs before the rest of the document is loaded. Try placing it at the end, or consider using the onLoadevent of body, or if you want to use a library such as jQuery, you could use the readyevent.
您的 JavaScript 代码在加载文档的其余部分之前运行。尝试把它放在最后，或者考虑使用 的onLoad事件body，或者如果你想使用像 jQuery 这样的库，你可以使用ready事件。
回答by Armin
If you wrap the whole <script>content in a load or domready event, it should work. Alternativly you could put the whole <script>-tag at the bottom of the website (right before closing </body>- tag
如果您将整个<script>内容包装在 load 或 domready 事件中，它应该可以工作。或者，您可以将整个<script>-tag 放在网站底部（就在关闭之前</body>- tag
