Q&A
###実現したいこと
JavaScriptを使用してToDoリストを作成しています。
実装イメージとしては、
- ラジオボタンでフィルタリングした場合、ID番号は元のID番号のまま。○
- タスクを削除ボタンを押した場合、該当のタスクが削除され、IDが振り直され連番になる。○
となるようにしたいと考えております。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>JavaScript3-1</title> 7</head> 8 9<body> 10 <header class="header"> 11 <h1>ToDoリスト</h1> 12 </header> 13 14 <form class="radio_button"> 15 <input type="radio" name="syurui" checked="checked" id="radio-all-select" onchange="radioChange()" value="all">すべて 16 <input type="radio" name="syurui" id="adio-working-select" onchange="radioChange()" value="doing">作業中 17 <input type="radio" name="syurui" id="radio-done-select" onchange="radioChange()" value="done">完了 18 </form> 19 20 21 22 <table> 23 <thead> 24 <th>ID</th> 25 <th>コメント</th> 26 <th>状態</th> 27 </thead> 28 <tbody id="addTask-target"></tbody> 29 </table> 30 31 <h2>新規タスクの追加</h2> 32 33 <input id="input-todo" type="text"> 34 <button id="add-button">追加</button> 35 36 <script src="main.js"></script> 37</body> 38 39</html>
JavaScript
1`use strict`; 2{ 3 // HTMLのID値を使って以下のDOM要素を取得する 4 // 入力ボックス 5 // 追加ボタン 6 // Todoリストを一覧表示するtable 7 const addButton = document.getElementById('add-button'); 8 const addTaskTarget = document.getElementById('addTask-target'); 9 const inputBox = document.getElementById('input-todo'); 10 11 // 入力したTodoタスクの一覧を保持する配列を定義する 12 const todos = []; 13 14//todosに格納していくtodoの定義 15 function createTodo() { 16 const taskid = todos.length; 17 const comment = inputBox.value; 18 const status = '作業中'; 19 const todo = { 20 taskid, 21 comment, 22 status, 23 }; 24 return todo; 25 } 26 27 // 「追加」ボタンがクリックされたときの処理を実装する // 28 addButton.addEventListener('click', () => { 29 const todo = createTodo(); 30 todos.push(todo); 31 inputBox.value = ''; 32 radioChange(); 33 }); 34 35 // 「todos」の中身を一覧表示するための関数を用意する // 36 const showTodos = (selecttodos) => { 37 addTaskTarget.textContent = ''; 38 selecttodos.forEach((todo) => { 39 const tableRecord = document.createElement('tr'); 40 addTaskTarget.appendChild(tableRecord); 41 const tableId = document.createElement('td'); 42 const tableComment = document.createElement('td'); 43 const tableStatus = document.createElement('td'); 44 const tableAction = document.createElement('td'); 45 46 tableId.textContent = todo.taskid; 47 tableComment.textContent = todo.comment; 48 tableRecord.appendChild(tableId); 49 tableRecord.appendChild(tableComment); 50 tableRecord.appendChild(tableStatus); 51 tableRecord.appendChild(tableAction); 52 53 tableStatus.appendChild(createStatusButton(todo)); 54 tableAction.appendChild(createDeleteButton()); 55 }); 56 }; 57 58 //「状態機能」を管理するボタンを生成する関数 59 const createStatusButton = (todo) => { 60 const statusButton = document.createElement('button'); 61 statusButton.innerText = todo.status; 62 statusButton.addEventListener('click', () => { 63 if (todo.status === '作業中') { 64 todo.status = '完了'; 65 } else { 66 todo.status = '作業中'; 67 } 68 showTodos(todos); 69 console.log(todos); 70 }); 71 return statusButton; 72 }; 73 74 //「削除機能」を管理するボタンを生成する関数 75 const createDeleteButton = (index) => { 76 const createremoveBtn = document.createElement("button"); 77 createremoveBtn.textContent = "削除"; 78 createremoveBtn.addEventListener("click", () => { 79 todos.splice(index, 1); 80 showTodos(todos); 81 todos.reduce((Idnum, todo) => (todo.taskid = Idnum + 1), -1); 82 showTodos(todos); 83 }); 84 return createremoveBtn; 85 }; 86 87 //ラジオボタンを押した際にフィルタリングする為の関数 88 function radioChange() { 89 const radio1_1 = document.getElementById("radio-all-select"); 90 const radio1_2 = document.getElementById("adio-working-select"); 91 const radio1_3 = document.getElementById("radio-done-select"); 92 93 if (radio1_1.checked) { 94 todos.slice(); 95 return showTodos(todos); 96 } else if (radio1_2.checked) { 97 let filterdoing = todos.filter((todo) => { 98 return todo.status === '作業中'; 99 }); 100 return showTodos(filterdoing); 101 } else if (radio1_3.checked) { 102 let filterdone = todos.filter((todo) => { 103 return todo.status === '完了'; 104 }); 105 return showTodos(filterdone); 106 } 107 } 108 console.log(todos); 109} 110
発生している問題・エラーメッセージ
- フィルタリングした場合、ID番号は元のID番号のまま。○
- タスクを削除した場合、IDが振り直され連番になる。○
上記実装イメージを実現する為に、フィルタリングする際はidにはlength、削除後はindexでidを振り直す。形で実装したいのですが、現在は１の実装は上手くいっているのですが、２の実装をする際に任意の行を削除ができません。
１だけを実装する分には、同じlengthを使用すれば、２はクリアできるのですが、今度は１がクリアできなくなってしまいます。
//「削除機能」を管理するボタンを生成する関数 const createDeleteButton = (index) => { const createremoveBtn = document.createElement("button"); createremoveBtn.textContent = "削除"; createremoveBtn.addEventListener("click", () => { todos.splice(index, 1); showTodos(todos); todos.reduce((Idnum, todo) => (todo.taskid = Idnum + 1), -1); showTodos(todos); }); return createremoveBtn; };
試したこと
配列のindexを使用して削除する。。。発想間違えていないのかなと思うのですが、思うようにコードを実装できませんでいた。
どのように書いていくのが良いでしょうか？
ご教授よろしくお願いします。
回答1件
0
ベストアンサー
createDeleteButtonの引数にindexを受け取るようにされていますが、実行時にindexを渡していない為indexがundefinedになっていて、その後の処理が思うように動いていないように見えます。
javascript
1 2const showTodos = (selecttodos) => { 3 selecttodos.forEach((todo) => { 4 ... 5 tableAction.appendChild(createDeleteButton()); // indexを渡していない 6 }); 7 }; 8 9const createDeleteButton = (index) => { // indexがundefinedになる 10 ... 11}
以下のようにしてあげれば、期待通りの動作になるかと思います。
javascript
1tableAction.appendChild(createDeleteButton(todo.taskid)); // todoのIdを渡してあげる
投稿2021/06/09 03:09
総合スコア84
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/06/09 03:58