如何在JavaScript中定义可以在所有函数中访问的全局变量

How to define a global variable in JavaScript that can be accessed in all the functions

本文关键字：函数 访问 全局变量 JavaScript 定义      更新时间：2023-09-26

下面是一个示例表单：

<!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>

虽然变量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>

它有什么问题？我如何定义一个全局变量供所有函数使用？

要使变量在所有作用域中都可见，您应该在最全局的作用域中声明它：

<script>
    var variableName;
</script>

或者你可以将其固定到全局上下文（窗口）：

window['variableName'] = value;

您的代码不起作用，因为在定义x时，表单不可用，这意味着您不为变量赋值
您应该将初始化封装在onload事件的事件处理程序中：

window.onload = function(){
    window.x = document.myForm.myInput;
};

或

var x;
window.onload = function(){
    x = document.myForm.myInput;
};

在DOM准备好之前，您的变量x被分配了document.myForm.myInput值。您可以将脚本放置在表单和myInput元素声明之后，将脚本设置为在onload事件中运行，或者使用jQuery的文档支持（其他提供类似支持的js库也可用）。

选项1:

<body>
  <form name="myForm">
    <input name="myInput"> ...
  </form>
  <script>
    ...
  </script>
</body>

选项2:

window.onload = function(){
  var x = document.myForm.myInput;
  ...
};

选项3:

(function($) {
   $(function() {
     var x = document.myForm.myInput;
     ...
   });
}(window.jQuery));

您的JavaScript代码在加载文档的其余部分之前运行。试着把它放在最后，或者考虑使用body的onLoad事件，或者如果你想使用像jQuery这样的库，你可以使用ready事件。

如果将整个<script>内容封装在加载或domready事件中，它应该可以工作。或者，您可以将整个<script>-标签放在网站的底部（就在关闭</body>-标签

之前
相关文章：