投稿2021/08/03 00:29
avaScriptでTodoリストを作成しています。
新規追加したタスクの削除ボタンを押したら、
1度目はタスクが消えるのですが、
再度、新規タスクを作成し、追加ボタンを押したら、
新規のタスクは出てこず、検索ツールに下記のエラー表示が出ます。
『検索ツールエラー文』
main.js:66 Uncaught TypeError: Cannot read property 'appendChild' of null
at HTMLButtonElement. (main.js:66)
恐れ入りますが、エラーの解決方法を教えてください。
実装したいのですが、思った通りの動作ができません。
色々調べて実装したのですが、これ以上積んでわからない状態です。
何方かアドバイスをお願いします。
期待する動作
①2回目に作成したTASKの削除ボタン押下時にそのタスクを削除できる。
②2回目に作成したタスク削除時はIDが振り直される
③削除後、新たにタスクを追加するとIDが連番となっている
indexhtml
1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>課題③</title> 9</head> 10<body> 11 <h1>TODOリスト</h1> 12 13 <p class="radio"> 14 <input type="radio" id="r1" name="list" value="1" checked><label for="r1">全て</label> 15 <input type="radio" id="r2" name="list" value="2"><label for="r2">作業中</label> 16 <input type="radio" id="r3" name="list" value="3"><label for="r3">完了</label> 17 </p> 18 19<table> 20 <thead> 21 <tr> 22 <th>ID</th> 23 <th>コメント</th> 24 <th>状態</th> 25 </tr> 26 </thead> 27 <tr> 28 <td></td> 29 <!-- <td>0</td> 30 <td>test</td> 31 <td><button>作業中</button></td> 32 <td><button>削除</button></td> --> 33 </tr> 34 <tbody id="list"></tbody> 35</table> 36 37 38 <h2>新規タスクの追加</h2> 39 <input type="text" id="newtask"/> 40 <button id="add">追加</button> 41 42 <script src="main.js"></script> 43</body> 44</html>
mainjs
1'use strict'; 2{ 3//inputタグを取得して変数に入れる 4const newtask = document.getElementById('newtask'); 5 6// 入力された値をリストに追加する 7const add = document.getElementById('add'); 8//削除ボタンを押したときに何かの処理を実行したい 9//次にdeleteTask関数を作成し、deleteTaskの引数には削除したいタスクのIDを渡します 10//remove関数を呼び出してタスク(テーブルの一行の要素)を削除します 11const deleteTask = (taskId) => { 12 const task = document.getElementById('list'); 13 task.remove(); 14} 15//idの変数を用意 16let id = 0; 17 18add.addEventListener('click',() => { 19 if(newtask.value =='') { 20 return 21 } 22 id += 1; 23 24 // olタグを取得して変数に入れる 25 const list = document.getElementById('list') 26 const tr = document.createElement('tr') 27 28 const taskId = `task-${id}` 29 tr.id = taskId 30 //const id = list.children.length + 1; 31 const comment = newtask.value; 32 33 // 分かりやすい変数名をつけます 34 const workButton = document.createElement('button'); 35 workButton.innerHTML = '作業中'; 36 37 const deleteButton = document.createElement('button'); 38 deleteButton.innerHTML = '削除'; 39 40 //削除ボタンが押されたときにタスクを削除したいので 41//deleteButtonがクリックされたときにdeleteTaskを呼び出す 42 43 deleteButton.addEventListener('click', () => deleteTask(taskId)); 44 // テーブルの行に必要なデータの配列を作成します 45 const cloumns = [id, comment, workButton, deleteButton] 46 47 // テーブルの行を作成します 48 // const tr = document.createElement('tr'); 49 50 // 配列の中身を一つずつ取り出して処理をします 51 cloumns.forEach((cloumn) => { 52 // テーブルの列を作成します 53 const td = document.createElement('td'); 54 55 // HTMLタグ処理を変更 56 if (cloumn instanceof HTMLElement) { 57 td.appendChild(cloumn) 58 } else { 59 td.innerText = cloumn; 60 } 61 // 行に列を追加します 62 tr.appendChild(td); 63 64 }) 65 //テーブルに行を追加 66 list.appendChild(tr); 67 newtask.value = '' 68}) 69}
回答2件
0
ベストアンサー
js
1const deleteTask = (taskId) => { 2 const task = document.getElementById('list'); 3 task.remove(); 4}
ここで <tbody id="list"> を消しているので、以降は追加ボタンの処理ができなくなりますね。
getElementById() の引数は taskId では。
投稿2021/08/03 00:51
総合スコア21695
0
新規タスクを<tbody id="list">に追加していると思いますが、タスクを削除したときに<tbody id="list">も削除されてしまっているので2回目追加するときに追加するところがないためエラーになっているようです。
投稿2021/08/03 00:43
総合スコア271
あなたの回答
tips
プレビュー
Q&A
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。