68329


以下のようなTodoリストを作成しています。  
<https://gyazo.com/0b47106078622a1e44e912f56b5e9603>

チェックボックスを作業中にしたら完了のタスクが消える、同じくチェックボックスを完了にしたら作業中が消える  
という実装を行いたいのですが、以下のようなエラーが出てしまいます。  
Typoや定義できていないidなどの関係かと思いましたが解決できずにおります。  
お手数ですがご教示お願いいたします。

[code]

    main.js:79 Uncaught TypeError: Cannot read property 'addEventListener' of null
    
[/code]

[code]

    {
      document.addEventListener('DOMContentLoaded', () => {
        const addTaskTrigger = document.getElementsByClassName('addTask-trigger')[0];
        const addTaskTarget = document.getElementsByClassName('addTask-target')[0];
        const addTaskValue = document.getElementsByClassName('addTask-value')[0];
        const radioWork = document.getElementById('#radio-work'); 
        const radioDone = document.getElementById('#radio-done');
        let nextId = 0;
        const todos = [];
    
        //Taskとidを作成
        const addTask = (task, id, tableItem) => {
          const idSpanTd = document.createElement('td');
          const taskSpanTd = document.createElement('td');
          //タスク追加時にtodosにtodoを追加 
          const todo = {
            task: 'taskSpanTd',
            status: '作業中'
          };
          todos.push(todo);
          //要素内のHTML文章を変更する
          idSpanTd.innerText = id;
          taskSpanTd.innerText = task;
          //生成したテーブル要素をブラウザに表示する
          tableItem.append(idSpanTd);
          tableItem.append(taskSpanTd);
          addTaskTarget.append(tableItem);
        };
    
        //Button要素を生成する
        const addButton = (tableItem, removeButton, createButton) => {
          const createButtonTd = document.createElement('td');
          const removeButtonTd = document.createElement('td');
          //要素内のHTML文章を変更する
          createButton.innerText = '作業中';
          removeButton.innerText = '削除';
          //生成したテーブル要素をブラウザに表示する
          tableItem.append(createButtonTd);
          tableItem.append(removeButtonTd);
          addTaskTarget.append(tableItem);
          //生成したbutton要素を生成する
          createButtonTd.append(createButton);
          removeButtonTd.append(removeButton);
        };
    
        //追加ボタンをクリックした際にtd要素を追加する処理を行う
        addTaskTrigger.addEventListener('click', () => {
          const task = addTaskValue.value;
          const tableItem = document.createElement('tr');
          const removeButton = document.createElement('button');
          const createButton = document.createElement('button');
          addTask(task, nextId++, tableItem);
          addButton(tableItem, removeButton, createButton);
          addTaskValue.value = '';
          // //削除ボタンを押した時にタスクを削除する
          const deleteElement = (a) => {
            const tableTag = a.target.closest('tr');
            if (tableTag) tableTag.remove();
            updateId();
          }
          removeButton.addEventListener('click', deleteElement, false);
    
          //ボタンを押したら作業中、完了中と変わる
          createButton.addEventListener('click', (a) => {
            if (createButton.textContent === "作業中") {
              createButton.textContent = "完了";
              const doneParent = a.target.parentNode;
              doneParent.className = 'workDone';/*完了class*/
            } else {
              createButton.textContent = "作業中";
              const workParent = a.target.parentNode;
              workParent.className = 'work';/*作業中class*/
            }
          });
        })
    
        /*ラジオボタン作業中を押下時の処理*/
        radioWork.addEventListener('click', function () {
          const workTasks = document.getElementsByClassName('work');
          workTasks = Array.from(workTasks);
          if (radioWork.checked === true) {
            workTasks.forEach(function (workTasks) {
              workTasks.style.display = "none";
            })
          } else {
            workTasks.forEach(function (workTasks) {
              workTasks.style.display = "";
            })
          }
        })
    
        // ラジオボタン完了押下時処理
        radioDone.addEventListener('click', function () {
          const doneTasks = document.getElementsByClassName('workDone');
          doneTasks = Array.from(doneTasks);
          if (radioDone.checked === true) {
            doneTasks.forEach(function (doneTasks) {
              doneTasks.style.display = "none";
            })
          } else {
            doneTasks.forEach(function (doneTasks) {
              doneTasks.style.display = "none";
            })
          }
        })
    
        //　連番　再振り直し
        const updateId = () => {
          const tbody = document.getElementsByTagName("tbody")[0];
          const taskList = tbody.getElementsByTagName('tr');
          nextId = 0;
          Array.from(taskList, tr => {
            tr.getElementsByTagName('td')[0].textContent = nextId;
            nextId++
          });
        }
      });
    }
[/code]

[code]

    <!DOCTYPE html>
    <html lang="ja">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="css/style.css">
      <title>Todoリスト</title>
    </head>
    
    <body>
      <h1>Todoリスト</h1>
      <p>
        <input type="radio" name="task" value="1" checked ="checked">全て
        <input type="radio" name="task" value="2"　id="radio-work">作業中
        <input type="radio" name="task" value="3"　id="radio-done">完了
      </p>
      <p></p>
      <table>
        <thead>
          <th>ID</th>
          <th>コメント</th>
          <th>状態</th>
          <th></th>
        </thead>
        <tbody class="addTask-target" id="tbody"></tbody>
      </table>
      <h2>新規タスクの追加</h2>
      <input class="addTask-value" type="text" />
      <button class="addTask-trigger" type="button">追加</button>
      <script src="js/main.js"></script>
    </body>
    </html>
[/code]


CC BY-SA 4.0
2020-07-06T04:17:50.577
68328
2020-07-06T04:44:46.093
40610
question
javascript
addEventListener' of nullの対処法

[code]

        const radioWork = document.getElementById('#radio-work');
        const radioDone = document.getElementById('#radio-done');
    
[/code]

`getElementById()`に指定するのはID属性の値なので、`#` が余計です。`#`を取りましょう。

[code]

        const radioWork = document.getElementById('radio-work');
        const radioDone = document.getElementById('radio-done');
    
[/code]

または、`#`はそのままで`querySelector()` を使います。

[code]

        const radioWork = document.querySelector('#radio-work'); 
        const radioDone = document.querySelector('#radio-done');
    
[/code]


CC BY-SA 4.0
2020-07-06T04:44:46.093
68329
2020-07-06T04:44:46.093
3475
68328
answer