【javascript】チェックボックスを使用した表示の切り替え

サイトを参考にしながら、JavaScriptで、Todoリストを作成しています。
Todoリストを作る上で、チェックボックスを使用した表示/非表示の切り替えを実装したいのですが、
思った通りの動作ができません。色々調べて実装したのですが、これ以上積んでわからない状態です。
何方かアドバイスをお願いします。

期待する動作

タスクの状態によって表示/非表示を切り替えできる
選択されたラジオボタンに応じて、タスクの表示を切り替える

２.　現在の状況

タスクの状態によって表示/非表示を切り替えできない
選択されたラジオボタンに応じて、タスクの表示を切り替えない

※下記のソースコードは引用テキストを雛形として参考にしています。
https://ja.stackoverflow.com/questions/67612/javascript%E3%81%A7todo%E3%83%AA%E3%82%B9%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B
https://ja.stackoverflow.com/questions/68342/%e3%83%81%e3%82%a7%e3%83%83%e3%82%af%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%9f%e8%a1%a8%e7%a4%ba-%e9%9d%9e%e8%a1%a8%e7%a4%ba%e3%81%ae%e5%88%87%e3%82%8a%e6%9b%bf%e3%81%88

html
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Todoリスト</title>
8</head>
9<body>
10    <h1>Todoリスト</h1>
11    　<p>
12        <input type="radio" id="radio-all"  name="task" value="1"　checked="checked">全て 
13        <input type="radio" id="radio-work" name="task" value="2">作業中 
14        <input type="radio" id="radio-done" name="task" value="3">完了
15    　</p>
16        <table>
17          <thead>
18              <th>ID</th>
19              <th>コメント</th>
20              <th>状態</th>
21          </thead>
22          <tbody class="addTask-target" id="tbody"></tbody>
23        </table>
24      <h2>新規タスクの追加</h2>
25      <input class="addTask-value" type="text"/>
26      <button class="addTask-trigger" type="button">追加</button>
27    <script src="main.js"></script>
28</body>
29</html>

JavaScript
1'use strict';
2{
3
4document.addEventListener('DOMContentLoaded', () => {
5// 必要なDOM要素を取得
6const addTaskTrigger = document.getElementsByClassName('addTask-trigger')[0];
7const addTaskTarget = document.getElementsByClassName('addTask-target')[0];
8const addTaskValue = document.getElementsByClassName('addTask-value')[0];
9// const radioAll = document.getElementById('radio-all');
10const radioWork = document.getElementById('radio-work');
11const radioDone = document.getElementById('radio-done');
12//ID用のインデックスを定義
13let nextId = 0;
14const todos = [];
15//Taskとidを作成
16const addTask = (task, id, tableItem) => {
17    const idSpanTd = document.createElement('td');
18    const taskSpanTd = document.createElement('td');
19//タスク追加時にtodosにtodoを追加 
20//要素内のHTML文章を変更する
21    idSpanTd.innerHTML = id;
22    taskSpanTd.innerText = task;
23 //生成したテーブル要素をブラウザに表示する
24    tableItem.append(idSpanTd);
25    tableItem.append(taskSpanTd);
26    addTaskTarget.append(tableItem);
27};
28
29//Button要素を生成する
30const addButton = (tableItem, removeButton, createButton) => {
31    const createButtonTd = document.createElement('td');
32    const removeButtonTd = document.createElement('td');
33    //要素内のHTML文章を変更する
34    createButton.innerText = '作業中';
35    removeButton.innerText = '削除';
36    //生成したテーブル要素をブラウザに表示する
37    tableItem.append(createButtonTd);
38    tableItem.append(removeButtonTd);
39    addTaskTarget.append(tableItem);
40    //生成したbutton要素を生成する
41    createButtonTd.append(createButton);
42    removeButtonTd.append(removeButton);
43};
44
45//追加ボタンをクリックした際にtd要素を追加する処理を行う
46addTaskTrigger.addEventListener('click', () => {
47    const task = addTaskValue.value;
48    const tableItem = document.createElement('tr');
49    const removeButton = document.createElement('button');
50    const createButton = document.createElement('button');
51    addTask(task, nextId++, tableItem);
52    addButton(tableItem, removeButton, createButton);
53    addTaskValue.value = '';
54//削除ボタンを押した時にタスクを削除する
55const deleteElement = (a) => {
56    const tableTag = a.target.closest('tr');
57    if (tableTag) tableTag.remove();
58    updateId();
59}
60removeButton.addEventListener('click', deleteElement, false);
61
62//ボタンを押したら作業中、完了中と変わる
63createButton.addEventListener('click', (a) => {
64    if(createButton.textContent === '作業中')　{
65     createButton.textContent = '完了';
66     const doneParent = a.target.parentNode;
67     doneParent.className = 'workDone'; /*完了class*/
68  } else {
69     createButton.textContent = '作業中';
70     const workParent = a.target.parentNode;
71     workParent.className = 'work'; /*作業中class*/
72  }
73});
74})
75//todoの状態を管理
76const todo = [{task: 'taskSpanTd', status: '作業中'}, {task: 'taskSpanTd',status: '完了'}]
77todo.push(todo);
78
79/*ラジオボタン作業中を押下時の処理*/
80radioDone.addEventListener('click', function() {
81    let workTasks = document.getElementsByClassName('work');
82    workTasks = Array.from(todo[0]);
83    if(radioWork.checked.todo[0] === true) {
84    workTasks.forEach(function(workTasks) {
85      workTasks.style.display = '';
86    })
87    } else {
88      workTasks.forEach(function(workTasks){
89          workTasks.style.display = 'none';
90      })
91    }
92})
93
94// ラジオボタン完了押下時処理
95radioWork.addEventListener('click', function() {
96    let doneTasks = document.getElementsByClassName('workDone');
97    doneTasks = Array.from(todo[1]);
98    
99    if(radioDone.checked.todo[1] === true) {
100      doneTasks.forEach(function (doneTasks) {
101       doneTasks.style.display = '';
102    })
103   } else {
104       doneTasks.forEach(function(doneTasks) {
105       doneTasks.style.display = 'none';
106      })
107     }
108   })
109   //　連番　再振り直し
110   const updateId = () => {
111     const tbody = document.getElementsByTagName('tbody')[0];
112     const taskList = tbody.getElementsByTagName('tr');
113     nextId = 0;
114     Array.from(taskList, tr => {
115         tr.getElementsByTagName('td')[0].textContent = nextId;
116         nextId++
117     });
118   }
119});
120}

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

回答1件

ベストアンサー

アドバイスをお願いします

とりあえず、開発者ツールを使うことをおすすめします。
エラーメッセージを見ずにデバッグをするのは、プロのエンジニアにとっても苦行なはずです。

ご提示のコードを試してみましたが、Uncaught TypeError: radioDone.checked.todo is undefinedというエラーが出ています。if(radioDone.checked.todo[1] === true) {というコードをどのような意図で書いたのか、radioDone.checkedには何が入っているのか、よく見直してみるといいのではないでしょうか。

投稿2021/07/17 01:33

編集2021/07/17 01:34

Lhankor_Mhy

総合スコア36158

edu

2021/07/17 11:02

Lhankor_Mhyさん、アドバイス、ありがとうございます！質問をする前に、開発者ツールを確認するのを忘れてました...。今後、気をつけます。

edu

2021/07/17 14:48

Lhankor_Mhyさんから、アドバイスを頂いて開発者ツールを使用して試したのですが、改善しないです。何方かアドバイスをお願いします！

Lhankor_Mhy

2021/07/17 15:12

現在のエラーメッセージはどのようなものが出ていますか？エラー解消のため、わからないところはどこですか？

edu

2021/07/18 01:33

Lhankor_Mhyさん、メッセージ、ありがとうございます！ ①『radioDone.checkedには何が入っているのか』ということだったので、 todoをtaskに変更しました。エラーメッセージが下記のように変わりました。『main.js:98 Uncaught ReferenceError: task is not defined at HTMLInputElement.<anonymous> (main.js:98)』 ②『task is not defined at HTMLInputElement.』とあったので、 <input type="radio" id="radio-done" name="task" value="3">完了のnameを const radioDone = document.getElementByName('task'とを宣言しました。『Uncaught SyntaxError: Identifier 'radioWork' has already been declared』というエラーメッセージが出て詰まっている状態です。アドバイスをお願いします。 ①変更前 doneTasks = Array.from(todo[1]); if(radioDone.checked.todo[1] === true) { doneTasks.forEach(function (doneTasks) { doneTasks.style.display = ''; 変更後 doneTasks = Array.from(task[1]); if(radioDone.checked.task[1] === true) { doneTasks.forEach(function (doneTasks) { doneTasks.style.display = '';

Lhankor_Mhy

2021/07/18 06:12

うーん、どうアドバイスすべきなのか悩みますね。正直言って、もう少し基礎をやってから、この問題に取り組んだ方がいいように思いますが…… 変数やプロパティに何が入っているかを調べるには、ステップ実行をしてウォッチ式を使うか、スクリプトにconsole.log()などを書いて値を出力するか、がいいと思います。

edu

2021/07/18 07:38

Lhankor_Mhyさん、アドバイスありがとうございます。プロゲートやドットインストール、Udemyを何度も繰り返し、テキストの言った事をなぞるばかりの学習をしてたので、アウトプット中心へ学習方法を切り替えて課題を解いて違う方法で、向上できればと思い、質問させて頂きました。Todeリストもラジオボタンを使用した際の表示・非表示以外の機能以外は実装できるのですが、基礎学習をした方が良いとの事なんですね。色々アドバイス、ありがとうございました。

Lhankor_Mhy

2021/07/18 08:00

「基礎」という書き方がよくなかったかもしれません。もう少し基礎的な、簡単なものを作るところから始めた方がいいかもしれない、ということです。ご提示のコードは、ご自分で書いたものではなく、しかもまともに動いていないもののようなので、それを改修して動くようにするのは難易度が高そうだな、と思います。また、開発者ツールが使えないようでしたので、それはできるようになった方がいいかな、と思いますね。これは「基礎学習」に当たると思います。

Lhankor_Mhy

2021/07/18 08:01

いずれにせよ、コメントしたように、一度ぐらいは「radioDone.checkedには何が入っているのか」を調べてみた方がいいと思いますよ。勉強という意味でも。

Lhankor_Mhy

2021/07/27 05:47

「まだ回答を求めています」とのことですが、ご不明な点があれば、コメントでお知らせください。

edu

2021/07/27 10:36

Lhankor_Mhyさん、コメントありがとうございます！『開発者ツール』の使い方が理解していないので、そこからまず学習をします！

Lhankor_Mhy

2021/07/27 13:51

そうですか。どこかでつまづいているのでしたら、ご遠慮なくお知らせください