Eri*_*air 1 javascript forms variables document elements
我的HTML页面中有以下JavaScript引用页面上的HTML表单:
<script type="text/javascript">
<!--
var myForm = document.myForm;
function validateForm() {
if (myForm.myInput == "")
alert("Please input some text.");
return false;
}
myForm.submit();
}
function showFormInput() {
myForm.reset();
document.getElementById('myInput').style.display = 'inline';
}
//-->
</script>
...
<form name="myForm" id="myForm" action="..." method="post">
<input id="myInput" name="myInput" type="text" value="" style="display:none;" />
</form>
Run Code Online (Sandbox Code Playgroud)
这两个函数在尝试访问变量时抛出异常myForm
,称"myForm为null或不是对象".为什么会这样?
更新:我认为我从中收集的一件事是全局变量通常应该用于字符串文字 - 而不是DOM中的元素.我将继续这样做,并谨慎使用元素变量,并且只在加载DOM之后.
bob*_*obo 10
你使用的是什么浏览器?
一般来说,你永远不应该使用document.*
访问.这是一个MS-IE约定.相反,使用
var myForm = document.getElementById( 'myForm' ) ;
var myInput = document.getElementById( 'myInput' ) ;
if( myInput.value == '' )
{
// its empty!
}
Run Code Online (Sandbox Code Playgroud)
正如outis所指出的那样,要么将脚本块放在页面底部,要么使用onload
<body>标记的事件,就像这样
<script>
function go()
{
alert( "The DOM has been assembled and can be accessed.. nOW!!!" ) ;
var myForm = document.getElementById( 'myForm' ) ; // ...
}
</script>
<body onload="go() ;">
</body>
Run Code Online (Sandbox Code Playgroud)
你的问题在于document.myForm
.您可能想要使用:
var myForm = document.getElementById('myForm');
Run Code Online (Sandbox Code Playgroud)
更新:其他答案引发了另外两个问题:
作为bobobobo的另一种回答指出,你应该使用document.getElementById()
的myForm.myInput
为好.此外,outis还遇到了另一个问题,因为您应该将<script>
块放在HTML文档的末尾附近,就在结束</body>
标记之前.否则,您的脚本将在表单插入DOM之前执行.