javascript - JavaScript の getElementById メソッドで null を返す

Question

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 is null"?

score 4 · Accepted Answer

これは、本文のコンテンツが読み込まれる前にこのコードが実行されたために発生しました。このコードを試してください：

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

このコマンドは、すべてのページコンテンツがロードされた場合にのみコードを実行します。最近のすべてのブラウザでの JavaScript の互換性により、

score 2 · Accepted Answer

script 要素を input 要素の下に移動します。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);

score 2 · Accepted Answer

これは、入力フィールドを選択したときに 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ユーザーがモザイクブラウザまたは古い IE ブラウザ 1 および 2 を使用していない限り、script タグ内のコメントはもう必要ありません。この手法は時代遅れです。

javascript - JavaScript の getElementById メソッドで null を返す

3 に答える 3

Related

Reference