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