※ ChatGPTを利用し、要約された質問です(原文:JavaScript のTypeError)
JavaScriptのTypeError: Cannot read properties of null (reading 'appendChild')
このQ&Aのポイント
JavaScriptのTypeError: Cannot read properties of null (reading 'appendChild')というエラーが発生しています。
エラーが起きている原因は、生成しようとしているHTML要素の親要素が存在しないことです。
具体的には、ul要素が存在していないため、appendChildメソッドを使用することができずエラーが発生しています。
Uncaught TypeError: Cannot read properties of null (reading 'appendChild') at add
というエラーで困っています。
初心者向け動画
https://www.youtube.com/watch?v=E08jeQBa1D0
さんでそのままのコードを打ったつもりですが、「テキストボックスに文字を入れて、エンターを押すと値がリストに追加されていく」という動きができません。
コードはこちらです。(動画のままを打ったつもりです)
[HTML]
<body class="bg-light">
<div class="container w-75">
<h1 class="text-center text-info my-4"> todo</h1>
<form id="form" class="mb-4">
<input type="text" id="input" placeholder="todoを入力" autocomplete="off" class="form-control">
</form>
<ul class="list-group text-secondary"></ul>
</div>
<script src="index.js"></script>
</body>
[JS]
const form = document.getElementById("form")
const input = document.getElementById("input")
const ul = document.getElementById("ul")
form.addEventListener("submit", function (event) {
event.preventDefault()
console.log(input.value)
add()
})
function add() {
const li = document.createElement("li")
li.innerText = input.value
li.classList.add("List-group-item")
ul.appendChild(li) //ここでエラー
input.value = ""
}
HTMLを生成するときにulがなくて追加できない、という意味であってるでしょうか。
何が原因なのか知りたいです。
お礼
コードの内容をちゃんと理解できていればわかったはずのエラーですね。 今後はエラーの内容をもっと理解できるように意識していこうと思います。 ありがとうございました。