0

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

*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 = "";
}
2
  • コードは画像ではなくテキストとして質問文に入れてください。コードの質問とAtomの質問は関係がないので分けてください。
    – int32_t
    2021年10月12日 2:42
  • ごありがとうございます。変更しました。よろしくお願いします。
    – Suzu
    2021年10月12日 4:43

1 件の回答 1

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

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

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

1
  • <script>と<ul>の入れ替えで正常に動くようになりました。ありがとうございます‼
    – Suzu
    2021年10月14日 0:56

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。