

ATOMを用いてtodolistの作成を行っています。（youtube "JavaScriptの「基礎」が1時間で分かる「超」入門講座【初心者向け】-
だれでもエンジニア / 山浦清透" に沿って行っています。）  
フォーム欄に入力したものをリスト化して表示する段階でulとliの紐づけを行ったのですがul is
nullというエラー表示がされフォームに入力した文字がリスト化されません。実際のコードがこちらです。youtubeにおいてもHTMLのulは空欄になっていました。また、この方はconstを用いていますがES6に関するエラー表示からvarを用いています。  
よろしくお願いします。

[code]

    *index.html*
    <!DOCTYPE html>
    <html dir="ltr" lang="en">
    <head>
        <meta charset="utf-8">
        <title>ToDo List</title>
    </head>
    <body>
        <div>
        <h1>ToDo List</h1>
        <style>
                h1{text-align:center; color:rgba(195, 64, 16, 0.83); font-family:fantasy; font-size:80px;}
        </style>
        <form id="form" name="form">
            <input id="input" placeholder="Things to do" type="text">
        </form>
        <style>
                  #form{text-align: center;}
        </style>
        <script src="index.js">
        </script>
        <ul class="list-group text-secondary" id="ul"></ul>
        </div>
    </body>
    </html>
    
    *index.js*
    var form = document.getElementById("form");
    var input = document.getElementById("input");
    var ul = document.getElementById("ul");
    form.addEventListener("submit", function (event) {
        event.preventDefault();
        add();
    });
    function add() {
        var li = document.createElement("li");
        li.innerText = input.value;
        li.classList.add("list-group-item");
        ul.appendChild(li);
        input.value = "";
    }
    
[/code]


CC BY-SA 4.0
2021-10-12T02:06:34.940
83022
2021-10-12T05:03:31.570
2021-10-12T04:40:12.087
48605
48605
question
javascript atom-editor ecmascript-6
ul is null のエラー表示を解決するには<todolistの作成＞

[code]

        <script src="index.js">
        </script>
        <ul class="list-group text-secondary" id="ul"></ul>
    
[/code]

ブラウザが`id="ul"`の要素を読むよりも前に`index.js`が実行され、その中の`document.getElementById("ul")`
の結果が`null`になっています。

`document.getElementById("ul")`の行を`add()`の中にいれるか、上記の `<script>`と
`<ul>`を入れ替えるか、`index.js`の中全体を `DOMContentLoaded` イベントリスナ内で実行するように変更すると直ると思います。


CC BY-SA 4.0
2021-10-12T05:03:31.570
83029
2021-10-12T05:03:31.570
3475
83022
answer