Question

我正在尝试使用javascript显示表单输入。所以我使用了这个JS代码块

<html>
<head>
</head>  
<body>    
<script>
var text = document.form1.name.value;
function printText(){   
    document.write(text);
}
</script>
<form name=form1>
<input type="text" id="txt" name="name"   ><br><br>
<input type="button" value="Submit!" onClick="printText();" >
</form>
</body>
</html>

但上面的代码无效。它给了我无限制的输出

但是当我尝试下面的代码时，它的工作......

<html>
<head>
</head>  
<body> 
<script>
function printText(){   
var text = document.form1.name.value;
    document.write(text);
}
</script>
<form name=form1>
<input type="text" id="txt" name="name"   ><br><br>
<input type="button" value="Submit!" onClick="printText();" >
</form>
</body>
</html>

所以我的问题是为什么我们不能在函数之外使用这个 var text = document.form1.name.value; 语句？

感谢。

Answer 1

您在文档加载时为值text赋值，并且首先它是空的。在第二种情况下，您可以通过某个按钮单击调用函数来获取表单值并将其打印出来

Answer 2

您的问题只是时间：JavaScript在文档中的位置执行。因此，您访问的DOM可能不是完全构建的。

因此，在第一个示例中，当执行行text = ...时，解析器不知道您的表单元素。此外，您的命令不会创建对值的引用，而只是复制它。

然而，在第二种情况下，只定义了函数（这很好），并且在调用函数时（并且评估了变量text），表单元素存在并且一切正常。

Answer 3

您正在窗口加载时分配表单的值，并且表单未初始化时，这就是为什么它给未定义的值。

如果要将var文本设为全局，请执行以下操作：

var text = "";
function printText(){   
    text = document.form1.name.value
    document.write(text);
}

如果你将脚本放在最后，那么它会初始化null值，因为在开始时该值将是输入类型的null。

所以你需要在开始时初始化变量，然后你可以把值放在那里。

如何从javascript函数外部获取表单输入？

3 个答案: