Question

我的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>

这两个函数在尝试访问变量myForm时抛出异常，说“myForm为null或不是对象”。为什么会这样？

UPDATE：我认为我从中收集的一件事是全局变量通常应该用于字符串文字 - 而不是DOM中的元素。我将继续这样做，并谨慎地使用元素变量，并且只在加载DOM之后才使用。

Answer 1

您使用的浏览器是什么？

通常，您不应该使用document.*访问权限。这是一个MS-IE约定。相反，使用

var myForm = document.getElementById( 'myForm' ) ;
var myInput = document.getElementById( 'myInput' ) ;

if( myInput.value == '' )
{
    // its empty!
}

正如outis所指出的，要么将脚本块放在页面底部，要么使用＆lt; body＆gt;的onload事件。标签，像这样

<script>
function go()
{
    alert( "The DOM has been assembled and can be accessed.. nOW!!!" ) ;
    var myForm = document.getElementById( 'myForm' ) ; // ...
}
</script>
<body onload="go() ;">
</body>

Answer 2

您的问题出在document.myForm。您可能想要使用：

var myForm = document.getElementById('myForm');

更新：其他答案又遇到了几个问题：

As bobobobo noted in another answer，您也应该document.getElementById()使用myForm.myInput。另外outis caught another problem因为您应该将<script>块放在HTML文档的末尾附近，就在结束</body>标记之前。否则，您的脚本将在表单插入DOM之前执行。

Answer 3

如果样本代表页面，则在评估脚本时，“myForm”形式不存在。除了使用document.getElementById（或document.forms.formName）之外，您还需要在处理表单元素之后延迟设置var myForm，或者better yet将表单作为函数的参数而不是使用全局变量。

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

3 个答案: