1. ホーム
  2. JavaScript

javascript のロケーションエラーにより、Uncaught TypeError が発生しました。nullのプロパティ'elements'を読み取ることができません

2022-02-19 02:32:41

jsでフォームスクリプトを学習しているときに、フォームフィールドを取得するデモを書きました。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var form=document.getElementById("myForm");
        var field=form.elements[0];
        alert(field);
    </script>
</head>
<body>
<form method="post" id="myForm">
    <ul>
        <li><input type="radio" name="color" value="red">Red</li>
        <li><input type="radio" name="color" value="green">Green</li>
        <li><input type="radio" name="color" value="blue">Blue</li>
    </ul>
</form>
</body>
</html>








ブラウザで以下のようなエラーが報告されていることがわかりました。Uncaught TypeError: Cannot read property 'elements' of null, そして、元のJSコードが間違った場所に置かれていて、JSが実行されているときにページの読み込みが終わっていなかったので、JSコードがページの要素を見つけられず、この問題を吐いたのだとわかりました。jsコードをbodyの末尾に置けば問題なし。