JavaScript: Todoリスト】意図通りにID(index)を振り分け,フィルタリング機能、削除機能を実装したい

###実現したいこと
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件

ベストアンサー

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

yoshihiko555

総合スコア84

intron0113

2021/06/09 03:58

大変わかりやすい解説ありがとうございました！無事に解決できました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！