ラジオボタンでのtodoリストの表示・非表示を切り替えたい

実装したい機能：todoリストのタスクをラジオボタンの全て、作業中、完了で表示・非表示を分けたい
わからない部分：現在はタスクの表示・非表示をさせる事はできているのですが、ラジオボタンが作業中と完了のどちらかにチェックが入っている時にタスクを追加すると、全てのタスクが再表示されてしまいます。
間違っている部分としては、ラジオボタンを押した時にしかfilterを使用していないからだと考えています。
現在のコードが

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <link rel="stylesheet" href="css/todo.css">
8  <title>Document</title>
9</head>
10
11<body>
12  <div class="radio_button">
13    <input type="radio" name="syurui" checked="checked" id="radio1_1" onchange="radioChange()" value="all">すべて
14    <input type="radio" name="syurui" id="radio1_2" onchange="radioChange()" value="doing">作業中
15    <input type="radio" name="syurui" id="radio1_3" onchange="radioChange()" value="done">完了 </div>
16  <div class="task">
17    <table border="0">
18      <thead>
19        <tr>
20          <td>ID</td>
21          <td>コメント</td>
22          <td>状態</td>
23        </tr>
24      </thead>
25      <tbody id="add_value">
26
27      </tbody>
28    </table>
29  </div>
30  <header class="header">
31    <h1 class="title">新規タスクの追加</h1>
32  </header>
33  <div class="textbox">
34    <input type="text" id="add_text" value="">
35    <input type="button" value="追加" class="add_task_button" id="add_btn">
36  </div>
37
38  <script src="js/todo.js"></script>
39
40</body>
41
42</html>

js
1"use strict";
2
3const addbtn = document.getElementById("add_btn");
4const addvalue = document.getElementById("add_value");
5const text = document.getElementById("add_text");
6const todos = [];
7const displayTodos = (selecttodos) => {
8  addvalue.textContent = "";
9  selecttodos.forEach((todo) => {
10    const createTr = document.createElement("tr"); //trを作成
11    const createId = document.createElement("td"); //tdを作成
12    createId.textContent = todo.taskid; //id_tdに要素数をカウント
13    const createComment = document.createElement("td");
14    createComment.innerHTML = todo.comment;
15    const status_td = document.createElement("td");
16    createTr.appendChild(createId); //id_tdをtrの子要素として追加
17    createTr.appendChild(createComment); //comment_tdをtrの子要素として追加
18    createTr.appendChild(status_td); //status_tdをtrの子要素として追加
19    status_td.append(createstatusbutton(todo)); //workButtonをstatus_tdに追加
20    status_td.append(createremoveButton());
21    addvalue.appendChild(createTr);
22    text.value = "";
23  });
24};
25
26function createTodo() {
27  const taskid = todos.length;
28  const comment = text.value;
29  const status = "作業中";
30  const todo = {
31    taskid,
32    comment,
33    status,
34  };
35  return todo;
36}
37
38addbtn.addEventListener("click", () => {
39  const todo = createTodo();
40  todos.push(todo);
41  displayTodos(todos);
42});
43
44const createstatusbutton = (todo) => {
45  const createstatusBtn = document.createElement("button");
46  createstatusBtn.innerText = todo.status;
47  createstatusBtn.addEventListener("click", () => {
48    if ((todos.status = "作業中")) {
49      todo.status = "完了";
50    } else {
51      todo.status = "作業中";
52    }
53    displayTodos(todos);
54  });
55  return createstatusBtn;
56};
57
58const createremoveButton = (index) => {
59  const todo = createTodo();
60  const createremoveBtn = document.createElement("button");
61  createremoveBtn.textContent = "削除";
62  createremoveBtn.addEventListener("click", () => {
63    todos.splice(index, 1);
64    displayTodos(todos);
65    todos.reduce((Idnum, todo) => (todo.taskid = Idnum + 1), -1);
66    displayTodos(todos);
67  });
68  return createremoveBtn;
69};
70
71function radioChange() {
72  const todo = createTodo();
73  const radio1_1 = document.getElementById("radio1_1");
74  const radio1_2 = document.getElementById("radio1_2");
75  const radio1_3 = document.getElementById("radio1_3");
76
77  if (radio1_1.checked) {
78    todos.slice();
79    return displayTodos(todos);
80  } else if (radio1_2.checked) {
81    let filterdoing = todos.filter((todo) => {
82      return todo.status === "作業中";
83    });
84    return displayTodos(filterdoing);
85  } else if (radio1_3.checked) {
86    let filterdone = todos.filter((todo) => {
87      return todo.status === "完了";
88    });
89    return displayTodos(filterdone);
90  }
91}

です。
該当部分のコードは、

js
1function radioChange() {
2  const todo = createTodo();
3  const radio1_1 = document.getElementById("radio1_1");
4  const radio1_2 = document.getElementById("radio1_2");
5  const radio1_3 = document.getElementById("radio1_3");
6
7  if (radio1_1.checked) {
8    todos.slice();
9    return displayTodos(todos);
10  } else if (radio1_2.checked) {
11    let filterdoing = todos.filter((todo) => {
12      return todo.status === "作業中";
13    });
14    return displayTodos(filterdoing);
15  } else if (radio1_3.checked) {
16    let filterdone = todos.filter((todo) => {
17      return todo.status === "完了";
18    });
19    return displayTodos(filterdone);
20  }
21}

こちらです。
私の考えとしては、タスクを表示させる関数(displaytodo0)に選択されているラジオボタンに応じてfilterをする関数を入れたら出来るかなと考えたのですが、うまくいきませんでした。
どのように書いたら良いでしょうか？
ご教授よろしくお願いします。

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

回答1件

ベストアンサー

filterかけてるメソッドはradioChangeっぽい。
追加処理や削除処理後に再レンダリングしたい時、displayTodos(todos)で全タスク表示するんじゃなくてradioChange()呼べばいいと思う。

投稿2020/12/17 06:03

zushi0905

総合スコア683

cyacya.0325

2020/12/17 06:46 編集

回答ありがとうございます再レンタリング時にradioChange()を呼ぶとは、displayTodos(todos)にradioChangeを入れるという認識であっていますか？

zushi0905

2020/12/17 06:51

displayTodos(todos)の代わりにradioChange()を呼ぶですね。 displayTodosはradioChange内でfilterされた後のデータで実行されてますね。タスク追加時に全てのタスクが表示されてしまう問題はこれで解決できると思います。

cyacya.0325

2020/12/17 06:58

勉強不足ですいません return displayTodos(filterdoing); このdisplayTodosの代わりにradioChangeを呼ぶということでしょうか？

zushi0905

2020/12/17 07:01

イベントリスナーの方ですね。addbtn.addEventListener 日本語に直すとtodoを追加した後に全てのtodosリストを表示するになってます。 todoを追加した後にフィルターされたtodoリストを表示するとしてあげればいいです。 radioChangeってメソッド名が悪い感ありますね。

cyacya.0325

2020/12/17 07:03

なるほどやってみます

cyacya.0325

2020/12/17 07:04

ありがとうございます

cyacya.0325

2020/12/17 08:11 編集

addbtn.addEventListener("click", () => { const todo = createTodo(); todos.push(todo); 　radioChange() ; }); こういうことですか？

zushi0905

2020/12/17 08:20

そうです。