Q&A
こんなのあったのでどうぞ
https://www.atlas.jp/checktool
前提
エンジニア駆け出しです。
JavaScriptで簡単なToDoアプリを作っています。
リストを新規で追加する機能を実装しようとしていて、JSでHTMLのタグを生成したところまではいいのですが、なぜかgetElementByIdで指定したidがnullになってしまうので、解決方法が知りたいです。よろしくお願いします。
実現したいこと
リスト追加機能を動作するようにする
発生している問題・エラーメッセージ
document.getElementById("incomplete-list").appendChild(div);でエラーが出てしまいます
TypeError Cannot read properties of null (reading 'appendChild')
該当のソースコード
JavaScript
1import "./styles.css"; 2 3 4const onClickAdd = () => { 5 //テキストボックスの値を取得し、初期化する 6 const inputText = document.getElementById("add-text").value; 7 document.getElementById("add-text").value = ""; 8 9 // div生成 10 const div = document.createElement("div"); 11 div.className = "list-row"; 12 13 // liタグ生成 14 const li = document.createElement("li"); 15 li.innerText = inputText; 16 17 //button(完了)タグを生成 18 const completeButton = document.createElement("button"); 19 completeButton.innerText = "完了"; 20 completeButton.addEventListener("click", () => { 21 alert("完了"); 22 }) 23 24 //button(削除)タグ生成 25 const deleteButton = document.createElement("button"); 26 deleteButton.innerText = "削除"; 27 deleteButton.addEventListener("click", ()=>{ 28 alert("削除"); 29 }); 30 31 // divタグの子要素に各要素を指定 32 33 div.appendChild(li); 34 div.appendChild(completeButton); 35 div.appendChild(deleteButton); 36 37// console.log(div); 38 39 //未完了リストに追加 40 document.getElementById("incomplete-list").appendChild(div); 41 //.appendChild(div); 42 43}; 44document 45 .getElementById("add-button") 46 .addEventListener("click", () => onClickAdd());
HTML
1<!DOCTYPE html> 2<html> 3 <link rel="stylesheet" href="src/styles.css" /> 4 <head> 5 <title>todo list</title> 6 <meta charset="UTF-8" /> 7 </head> 8 9 <body> 10 <div class="input-area"> 11 <input id="add-text" placeholder="TODOを入力" /> 12 <button id="add-button">追加</button> 13 </div> 14 <div class="imcomplete-area"> 15 <p class="title">未完了のTODO</p> 16 <ul id="incomplete-list"> 17 <div class="list-row"> 18 <li>TODOです</li> 19 <button>完了</button> 20 <button>削除</button> 21 </div> 22 <div class="list-row"> 23 <p>TODOです</p> 24 <button>完了</button> 25 <button>削除</button> 26 </div> 27 </ul> 28 </div> 29 <div class="complete-area"> 30 <p class="title">完了したTODO</p> 31 <ul> 32 <li> 33 <div class="list-row"> 34 <p>TODOでした</p> 35 <button>戻す</button> 36 </li> 37 </ul> 38 </div> 39 <script src="src/index.js"></script> 40 </body> 41</html> 42 43
cssは省略しています。
試したこと
console.log(!!document.getElementById("incomplete-list"));
でfalseが返ってきたので、idが取得できていないことがおそらく原因なのは分かりました。
HTMLの読み込み順を考慮してJSを読み込むコードをbodyタグの最後に書きましたが、idは取得できませんでした。
また、window.onload = function(){onClickAdd}を試してみましたが、なぜか動きませんでした。
補足情報（FW/ツールのバージョンなど）
開発環境はCodeSandboxです。
・全角空白が簡単に入力出来ないようにIME設定を変える（必須）
・全角空白が目で確認できるエディターを使う（可能な限り。上記設定してあれば必須では無いが）
回答2件
ベストアンサー
0
<ul id="incomplete-list">
の「ul」と「id」の間のスペースが全角です。
投稿2022/08/03 13:27
総合スコア176
あなたの回答
tips
プレビュー
