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

todoリストのタスクをラジオボタンの全て、作業中、完了で表示・非表示を分けたいです。調べてコードを入力したのですが、 main.js: 79、87 Uncaught ReferenceError: workButton is not defined at HTMLInputElement. (main.js:79,87) ※『if (workButton.innerHTML !== '作業中') 』 のエラーがなかなか解消できません。 色々調べて実装したのですが、これ以上積んでわからない状態です。 何方かアドバイスをお願いします。

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


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>課題③</title>
</head>
<body>
    <h1>TODOリスト</h1>
    
    <p class="radio">
      <input type="radio" id="r1" name="list" value="1" checked><label for="r1">全て</label>
      <input type="radio" id="r2" name="list" value="2"><label for="r2">作業中</label>
      <input type="radio" id="r3" name="list" value="3"><label for="r3">完了</label>
    </p>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>コメント</th>
      <th>状態</th>
    </tr>
  </thead>
    <tr>
      <td></td>
      <!-- <td>0</td>
      <td>test</td>
      <td><button>作業中</button></td>
      <td><button>完了中</button></td>
      <td><button>削除</button></td> -->
    </tr>
    <tbody id="list"></tbody>
</table>
  
    
    <h2>新規タスクの追加</h2>
    <input type="text" id="newtask"/>
    <button id="add">追加</button>

    <script src="main.js"></script>
</body>
</html>



'use strict';
{
//inputタグを取得して変数に入れる
const newtask = document.getElementById('newtask');
// 入力された値をリストに追加する
const add = document.getElementById('add');
//削除ボタンを押したときに何かの処理を実行したい
const deleteTask = (btn) => {
  const task = btn.closest('tr');
  const tbody=task.closest('tbody');
  //remove関数を呼び出してタスク(テーブルの一行の要素)を削除します
  task.remove();
  tbody.querySelectorAll('tr').forEach((x,y)=>{
    x.setAttribute('id',`id-${y+1}`);
    x.querySelector('td').textContent=y+1;
  });
  id--;
}
//idの変数を用意
let id = 0;

add.addEventListener('click',() => {
  if(newtask.value =='') {
    return
  }
  id += 1;
  const list = document.getElementById('list')
  const tr = document.createElement('tr')

  const taskId = `task-${id}`
  tr.id = taskId
  const comment = newtask.value;
  
  // 分かりやすい変数名をつけます
   const workButton = document.createElement('button');
   workButton.innerHTML = '作業中';
   //作業中の状態でボタンをクリックすると完了へ変更される
　　//完了の状態でボタンをクリックすると作業中へ変更される
   workButton.addEventListener('click', () => {
　　if (workButton.innerHTML === '作業中') {
　　　workButton.innerHTML = '完了';
　　} else {
　　　workButton.innerHTML = '作業中';
　　}
　});

  const deleteButton = document.createElement('button');
  deleteButton.innerHTML = '削除';

  deleteButton.addEventListener('click', () => deleteTask(deleteButton));
  // テーブルの行に必要なデータの配列を作成します
  const cloumns = [id, comment, workButton, deleteButton]

  // 配列の中身を一つずつ取り出して処理をします
  cloumns.forEach((cloumn) => {
    // テーブルの列を作成します
  const td = document.createElement('td');

   // HTMLタグ処理を変更
  if (cloumn instanceof HTMLElement) {
      td.appendChild(cloumn)
  } else {
    td.innerText = cloumn;
  }
  //行に列を追加します
    tr.appendChild(td);
  })
  //テーブルに行を追加
  list.appendChild(tr);
  newtask.value = '' 
})
　// チェックボックスの表示の切替
  let all = document.getElementById('r1');
  let working = document.getElementById('r2');
  let done = document.getElementById('r3');

  // 作業中
  working.addEventListener('click', () => {
   if (workButton.innerHTML !== '作業中') {
      task.classList.add('none')
 } else {
      task.classList.remove('none')
    }
    });
  // 完了
  done.addEventListener('click', () => {
   if (workButton.innerHTML !== '作業中') {
      task.classList.add('none')
 } else {
      task.classList.remove('none')
    }
    });
  // 全て
      all.addEventListener('click', () => {
        task.classList.remove('none');
      });
      document.getElementById('newtask').value = '';

}