Document

実装したい機能：todoリストのタスクをラジオボタンの全て、作業中、完了で表示・非表示を分けたいわからない部分：現在はタスクの表示・非表示をさせる事はできているのですが、ラジオボタンが作業中と完了のどちらかにチェックが入っている時にタスクを追加すると、全てのタスクが再表示されてしまいます。間違っている部分としては、ラジオボタンを押した時にしかfilterを使用していないからだと考えています。現在のコードが ```html Document

すべて作業中完了

ID	コメント	状態

``` ```js "use strict"; const addbtn = document.getElementById("add_btn"); const addvalue = document.getElementById("add_value"); const text = document.getElementById("add_text"); const todos = []; const displayTodos = (selecttodos) => { addvalue.textContent = ""; selecttodos.forEach((todo) => { const createTr = document.createElement("tr"); //trを作成 const createId = document.createElement("td"); //tdを作成 createId.textContent = todo.taskid; //id_tdに要素数をカウント const createComment = document.createElement("td"); createComment.innerHTML = todo.comment; const status_td = document.createElement("td"); createTr.appendChild(createId); //id_tdをtrの子要素として追加 createTr.appendChild(createComment); //comment_tdをtrの子要素として追加 createTr.appendChild(status_td); //status_tdをtrの子要素として追加 status_td.append(createstatusbutton(todo)); //workButtonをstatus_tdに追加 status_td.append(createremoveButton()); addvalue.appendChild(createTr); text.value = ""; }); }; function createTodo() { const taskid = todos.length; const comment = text.value; const status = "作業中"; const todo = { taskid, comment, status, }; return todo; } addbtn.addEventListener("click", () => { const todo = createTodo(); todos.push(todo); displayTodos(todos); }); const createstatusbutton = (todo) => { const createstatusBtn = document.createElement("button"); createstatusBtn.innerText = todo.status; createstatusBtn.addEventListener("click", () => { if ((todos.status = "作業中")) { todo.status = "完了"; } else { todo.status = "作業中"; } displayTodos(todos); }); return createstatusBtn; }; const createremoveButton = (index) => { const todo = createTodo(); const createremoveBtn = document.createElement("button"); createremoveBtn.textContent = "削除"; createremoveBtn.addEventListener("click", () => { todos.splice(index, 1); displayTodos(todos); todos.reduce((Idnum, todo) => (todo.taskid = Idnum + 1), -1); displayTodos(todos); }); return createremoveBtn; }; function radioChange() { const todo = createTodo(); const radio1_1 = document.getElementById("radio1_1"); const radio1_2 = document.getElementById("radio1_2"); const radio1_3 = document.getElementById("radio1_3"); if (radio1_1.checked) { todos.slice(); return displayTodos(todos); } else if (radio1_2.checked) { let filterdoing = todos.filter((todo) => { return todo.status === "作業中"; }); return displayTodos(filterdoing); } else if (radio1_3.checked) { let filterdone = todos.filter((todo) => { return todo.status === "完了"; }); return displayTodos(filterdone); } } ``` です。該当部分のコードは、 ```js function radioChange() { const todo = createTodo(); const radio1_1 = document.getElementById("radio1_1"); const radio1_2 = document.getElementById("radio1_2"); const radio1_3 = document.getElementById("radio1_3"); if (radio1_1.checked) { todos.slice(); return displayTodos(todos); } else if (radio1_2.checked) { let filterdoing = todos.filter((todo) => { return todo.status === "作業中"; }); return displayTodos(filterdoing); } else if (radio1_3.checked) { let filterdone = todos.filter((todo) => { return todo.status === "完了"; }); return displayTodos(filterdone); } } ``` こちらです。私の考えとしては、タスクを表示させる関数(displaytodo0)に選択されているラジオボタンに応じてfilterをする関数を入れたら出来るかなと考えたのですが、うまくいきませんでした。どのように書いたら良いでしょうか？ご教授よろしくお願いします。

	@@ -1 +1 @@
1	- ラジオボタンでのtodoリストの表示・非表示について
1	+ ラジオボタンでのtodoリストの表示・非表示を切り替えたい

質問編集履歴