Question

以下是一个示例表单：

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

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

Answer 1

要使变量在所有范围内都可见，您应该在最全局的范围内声明它：

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

Answer 2

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

Answer 3

您的JavaScript代码在加载文档的其余部分之前运行。尝试将其放在最后，或考虑使用onLoad的{{1}}事件，或者如果您想使用jQuery等库，则可以使用ready事件。

Answer 4

如果将整个<script>内容包装在load或domready事件中，它应该可以正常工作。另外，您可以将整个<script> - 标记放在网站的底部（在关闭之前</body> - 标记

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

4 个答案: