0

JavaScript 中 getElementById 方法返回 null

<html>
<head>

<title>test_elementObject</title>

<script language="JavaScript" type="text/javascript">
<!--
        var input1 = document.getElementById ( "input1" );
        input1.value = "sample text"
//-->
</script>


</head>

<body>

<input id = "input1" type = "text" value = "" />

</body>
</html>

我是 JavaScript 新手，为什么脚本会导致错误：“input1 为空”？

4

3 回答 3

4

发生这种情况是因为此代码是在加载正文内容之前执行的。试试这个代码：

<script language="JavaScript" type="text/javascript">
<!--
window.onload = function(){
    var input1 = document.getElementById ( "input1" );
    input1.value = "sample text"
}
//-->
</script>

此命令使代码仅在加载所有页面内容时执行并记住这一点<!--并且//-->已过时，因为所有最近的浏览器都具有 javascript 兼容性

于 2012-05-31T18:36:39.317 回答
2

将脚本元素移动到输入元素下方。JavaScript 是一种事件驱动语言，自上而下解析/执行。

<title>test_elementObject</title>

</head>
<body>
    <input id = "input1" type = "text" value = "" />
</body>
<script language="JavaScript" type="text/javascript">
<!--
    var input1 = document.getElementById ( "input1" );
    input1.value = "sample text"
//-->
</script>
</html>

或者，您可以正确使用事件：

window.addEventListener('load', function(e){
    var input1 = document.getElementById ( "input1" );
    input1.value = "sample text"
}, false);
于 2012-05-31T18:36:40.317 回答
2

这是因为当您选择输入字段时 DOM 尚未准备好。您可以在标记之后移动脚本。

<html>
<head>    
<title>test_elementObject</title>               
</head>

<body>

<input id = "input1" type = "text" value = "" />
 <script language="JavaScript" type="text/javascript">   
        var input1 = document.getElementById ( "input1" );
        input1.value = "sample text"   
</script>
</body>

或连接到 window.onload 函数，这将确保文档已被解析并且 DOM 已准备好。 

window.onload = function(){
    var input1 = document.getElementById ( "input1" );
    input1.value = "sample text"
}

PS you don't need the comments <!-- in the script tags anymore, unless your users are using the mosaic browser or older IE browsers 1 and 2, this technique is outdated.

于 2012-05-31T18:40:36.087 回答