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

JavaScriptでTodoリストを作成しています。

todoリストのタスクをラジオボタンの全て、作業中、完了で表示・非表示を分けたいです。調べてコードを入力したのですが、
main.js: 79、87 Uncaught ReferenceError: workButton is not defined
at HTMLInputElement.<anonymous> (main.js:79,87)
※『if (workButton.innerHTML !== '作業中') 』

のエラーがなかなか解消できません。
色々調べて実装したのですが、これ以上積んでわからない状態です。
何方かアドバイスをお願いします。

期待する動作
① タスクの状態によって表示/非表示を切り替えできる
② 選択されたラジオボタンに応じて、タスクの表示を切り替える
③「作業中」選択時に特定のタスクの状態を作業中→完了に切り替えた場合、そのタスクが非表示になる。
④「完了」選択時に特定の特定のタスクの状態を完了→作業中に切り替えた場合、そのタスクが非表示になる。
⑤「作業中」選択時にタスクを新規追加した場合、タスクが表示される
⑥「完了」選択時にタスクを新規追加した場合、タスクは表示されない（が、裏ではちゃんと追加されている）

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

int32_t

2021/08/10 05:24 編集

radioButton が定義されずに使われているぞというエラーで、じっさいコード中には変数 radioButton の宣言も代入もありません。どういう意図の変数なんでしょうか。

edu

2021/08/10 06:11

int32_tさん、アドバイスありがとうございます！申し訳ないのですが、もう少し何処がどのように間違っているのか、詳しく教えてください。

int32_t

2021/08/10 06:21

どういう意図で radioButton.forEach(...) の部分を書いたのですか?

edu

2021/08/10 06:36

int32_tさん、意図的ではなく、下記のサイトを参考にソースコードを入力しました。 [【JavaScript: ToDoリスト】ラジオボタンで “表示” “非表示” を切り替える方法] (https://ina-yona-mochiko.com/programming/javascript/radiobutton/)

edu

2021/08/10 07:56

int32_tさん、ご指摘ありがとうございました。radioButton.forEachの部分の指摘で勘違いしているところがわかり、質問のソースコードを修正しました。