Todoリストの追加したタスクの表示・非表示を切り替えたい。

todoリストのタスクをラジオボタンの全て、作業中、完了で表示・非表示を分けたいです。
このサイトでアドバイスを頂き、調べてコードを入力し、エラーは解消されたのですが、期待する動作① ②が実装さません。
色々調べて実装したのですが、これ以上積んでわからない状態です。
何方かアドバイスをお願いします。
期待する動作
① タスクの状態によって表示/非表示を切り替えできる
② 選択されたラジオボタンに応じて、タスクの表示を切り替える

indexhtml
1!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>課題③</title>
8</head>
9<body>
10    <h1>TODOリスト</h1>
11    
12    <p class="radio">
13      <input type="radio" id="r1" name="list" value="1" checked><label for="r1">全て</label>
14      <input type="radio" id="r2" name="list" value="2"><label for="r2">作業中</label>
15      <input type="radio" id="r3" name="list" value="3"><label for="r3">完了</label>
16    </p>
17
18<table>
19  <thead>
20    <tr>
21      <th>ID</th>
22      <th>コメント</th>
23      <th>状態</th>
24    </tr>
25  </thead>
26    <tr>
27      <td></td>
28      <!-- <td>0</td>
29      <td>test</td>
30      <td><button>作業中</button></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タグを取得して変数に入れる
4  const newtask = document.getElementById("newtask");
5  // 入力された値をリストに追加する
6  const add = document.getElementById("add");
7  //削除ボタンを押したときに何かの処理を実行したい
8  const deleteTask = (btn) => {
9    const task = btn.closest("tr");
10    const tbody = task.closest("tbody");
11    //remove関数を呼び出してタスク(テーブルの一行の要素)を削除します
12    task.remove();
13    tbody.querySelectorAll("tr").forEach((x, y) => {
14      x.setAttribute("id", `id-${y + 1}`);
15      x.querySelector("td").textContent = y + 1;
16    });
17    id--;
18  };
19  //idの変数を用意
20  let id = 0;
21
22  add.addEventListener("click", () => {
23    if (newtask.value == "") {
24      return;
25    }
26    id += 1;
27    const list = document.getElementById("list");
28    const tr = document.createElement("tr");
29
30    const taskId = `task-${id}`;
31    tr.id = taskId;
32    const comment = newtask.value;
33
34    // 分かりやすい変数名をつけます
35    const workButton = document.createElement("button");
36    workButton.innerHTML = "作業中"; //完了の状態でボタンをクリックすると作業中へ変更される
37    //作業中の状態でボタンをクリックすると完了へ変更される
38    workButton.addEventListener("click", () => {
39      if (workButton.innerHTML === "作業中") {
40        workButton.innerHTML = "完了";
41      } else {
42        workButton.innerHTML = "作業中";
43      }
44    });
45
46    const deleteButton = document.createElement("button");
47    deleteButton.innerHTML = "削除";
48
49    deleteButton.addEventListener("click", () => deleteTask(deleteButton));
50    // テーブルの行に必要なデータの配列を作成します
51    const cloumns = [id, comment, workButton, deleteButton];
52
53    // 配列の中身を一つずつ取り出して処理をします
54    cloumns.forEach((cloumn) => {
55      // テーブルの列を作成します
56      const td = document.createElement("td");
57
58      // HTMLタグ処理を変更
59      if (cloumn instanceof HTMLElement) {
60        td.appendChild(cloumn);
61      } else {
62        td.innerText = cloumn;
63      }
64      //行に列を追加します
65      tr.appendChild(td);
66    });
67    //テーブルに行を追加
68    list.appendChild(tr);
69    newtask.value = "";
70  }); // チェックボックスの表示の切替
71  const all = document.getElementById("r1");
72  const working = document.getElementById("r2");
73  const done = document.getElementById("r3");
74
75  // 作業中
76  working.addEventListener("click", () => {
77    if (newtask.innerHTML !== "作業中") {
78      newtask.classList.add("none");
79    } else {
80      newtask.classList.remove("none");
81    }
82  });
83  // 完了
84  done.addEventListener("click", () => {
85    if (newtask.innerHTML !== "完了") {
86      newtask.classList.add("none");
87    } else {
88      newtask.classList.remove("none");
89    }
90  });
91  // 全て
92  all.addEventListener("click", () => {
93    newtask.classList.remove("none");
94  });
95  document.getElementById("newtask").value = "";
96}

ku__ra__ge

2021/08/11 07:28

課題を切り分けてみましょう。あなたがやりたいことは「ラジオボタンが選択されたときに何かする」「リストに追加されたタスクについて、１つずつ処理する」「タスクの状態を取得する」「要素の表示/非表示を切り替える」といった課題に切り分けられると思います。それぞれについて実現方法を調査・試行してわからない点を記述してください。

1T2R3M4

2021/08/11 08:03

https://ja.stackoverflow.com/questions/80715/ 以下ご対応ください。 https://teratail.com/help#posted-otherservice

edu

2021/08/11 08:12

1T2R3M4さん、ご指摘ありがとうございます！このサイトの使い方をよくわかっていませんでした。申し訳ございません。

edu

2021/08/11 08:20

ku__ra__geさん、素晴らしいアドバイス、ありがとうございます！！機能を実装したい場合、細分化して行う事が大切なんですね。希望する動作を４つに分けて取り組んでみます！

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

回答1件

自己解決

ku_ra_geさん、素晴らしいアドバイス、ありがとうございます！！

機能を実装したい場合、細分化して行う事が大切なんですね。
細分化して機能を実装する考えはなかったです。
希望する動作を４つに分けてまずは、取り組んでみます！
希望する動作
① ラジオボタンが選択されたときに何かする
② リストに追加されたタスクについて、１つずつ処理する
③ タスクの状態を取得する
④ 要素の表示/非表示を切り替える

投稿2021/08/11 08:21

編集2021/08/11 08:26

edu

総合スコア35