为什么我的JavaScript变量不能跨函数持久化?

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)


Dan*_*llo 7

你的问题在于document.myForm.您可能想要使用:

var myForm = document.getElementById('myForm');
Run Code Online (Sandbox Code Playgroud)

更新:其他答案引发了另外两个问题:

作为bobobobo的另一种回答指出,你应该使用document.getElementById()myForm.myInput为好.此外,outis遇到了另一个问题,因为您应该将<script>块放在HTML文档的末尾附近,就在结束</body>标记之前.否则,您的脚本将在表单插入DOM之前执行.


out*_*tis 7

如果样本代表页面,则在评估脚本时不存在"myForm"形式.除了使用document.getElementById(或)之外,您还需要延迟设置,直到处理表单元素之后,或者更好的是,将表单作为参数传递给函数而不是使用全局变量.document.forms.formNamevar myForm