javascriptの配列とfilerについて教えていただきたいです。
Q&A
Closed
配列への正しいfilterの掛け方が分からず苦戦しております。
javascriptを使用し簡単なTODOリストを作成しております。
その中でfilterを使ったタスクの削除ボタンの実装がうまくいきません
（以前他のアプローチを他の方にご教示いただいたのですが、自分で試していた方法でもゴールまで持っていけないかと思い投稿させていただきました）
該当するソースコード
const deletebutton = document.createElement("button");
deletebutton.innerText = "削除";
deletebutton.style.backgroundColor = "lightgray";
deletebutton.addEventListener("click", () => {
const resultdelete = tasks.filter((aaa) => aaa !== task);
showTaskList(resultdelete);
console.log("大元のタスク？", tasks);
console.log("選択したタスク", task);
console.log("resultdelete", resultdelete);
// if (radiowork.checked) {
// const newresult = resultdelete.filter((task) => task.status === "作業中");
// console.log(newresult);
// showTaskList(newresult);
// }
});
return deletebutton;
};
まず、記載コードで大元のタスクの配列（tasks）から削除ボタンを押したタスクのみを削除（ある意味非表示）にしそこからさらにfilterにかけ、作業中・完了・すべてとstatusに合わせて表示、非表示を切り替えようと考えているのですが、そもそも大元の配列tasksからタスクを削除できていないようです。
tasksをログに出力しても削除ボタンを押したタスクは残ったままでした。
自分でもこんがらがってしまっている部分があり拙い文章で大変申し訳ございません。
何かご助言を頂けますと幸いです。
下記全体
const input = document.getElementById("addbutton");
const tbody = document.getElementById("tbody");
const radiowork = document.getElementById("radio-work");
const radiocomplete = document.getElementById("radio-complete");
const radioall = document.getElementById("radio-all");
const tasks = [];
const createStatusButton = (task) => {
const button = document.createElement("button");
button.innerText = task.status;
button.style.backgroundColor = "lightgray";
button.addEventListener("click", () => {
const buttonStatus = button.innerText;
// console.log("変更前", task);
if (buttonStatus === "作業中" && radiowork.checked) {
button.textContent = "完了";
task.status = "完了";
const result = tasks.filter((task) => task.status === "作業中");
showTaskList(result);
} else if (buttonStatus === "完了" && radiocomplete.checked) {
button.textContent = "作業中";
task.status = "作業中";
const result2 = tasks.filter((task) => task.status === "完了");
showTaskList(result2);
} else if (radioall.checked) {
if (task.status === "作業中") {
button.textContent = "完了";
task.status = "完了";
} else {
button.textContent = "作業中";
task.status = "作業中";
}
showTaskList(tasks);
}
// console.log("変更後", task);
});
return button;
};
const createdeleteButton = (task) => {
const deletebutton = document.createElement("button");
deletebutton.innerText = "削除";
deletebutton.style.backgroundColor = "lightgray";
deletebutton.addEventListener("click", () => {
const resultdelete = tasks.filter((aaa) => aaa !== task);
showTaskList(resultdelete);
console.log("大元のタスク？", tasks);
console.log("選択したタスク", task);
console.log("resultdelete", resultdelete);
// if (radiowork.checked) {
// const newresult = resultdelete.filter((task) => task.status === "作業中");
// console.log(newresult);
// showTaskList(newresult);
// }
});
return deletebutton;
};
const showTaskList = (filteredTasks) => {
console.log("filteredTasks", tasks);
tbody.innerHTML = "";
filteredTasks.forEach((task) => {
const tr = document.createElement("tr");
const td1 = document.createElement("td");
td1.innerHTML = `${task.id}`;
const td2 = document.createElement("td");
td2.innerHTML = `${task.comment}`;
const td3 = document.createElement("td");
const td4 = document.createElement("td");
tbody.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
td3.appendChild(createStatusButton(task));
td4.appendChild(createdeleteButton(task));
});
};
const tasksStatus = document.getElementById("statusradio");
const text = document.getElementById("tasks");
input.addEventListener("click", () => {
const text = document.getElementById("tasks");
if (text.value === "") {
alert("タスクを入力してください");
} else {
tasks.push({
id: tasks.length + 1,
comment: text.value,
status: "作業中",
});
if (radiowork.checked) {
const result = tasks.filter((task) => task.status === "作業中");
showTaskList(result);
} else if (radiocomplete.checked) {
const result2 = tasks.filter((task) => task.status === "完了");
showTaskList(result2);
} else if (radioall.checked) {
showTaskList(tasks);
}
text.value = "";
}
});
radiowork.addEventListener("change", (task) => {
console.log(tasks); // ラジオボタン（作業中）がクリックされた時のタスクを表示
const result = tasks.filter((task) => task.status === "作業中");
console.log("result", result); // フィルターをかけた後のタスクのみをコンソールに出力
showTaskList(result);
});
// ラジオボタン（完了）がクリックされた時
radiocomplete.addEventListener("change", () => {
const result2 = tasks.filter((task) => task.status === "完了");
console.log("result", result2);
showTaskList(result2);
});
// ラジオボタン（完了）がクリックされた時
radioall.addEventListener("change", () => {
showTaskList(tasks);
});
<!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" />
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<title>JS課題3</title>
</head>
<body>
<h1 class="text-4xl font-semibold font-serif">ToDoリスト</h1>
<div class="mt-8" id="statusradio">
<input
type="radio"
name="taskradio"
id="radio-all"
value="all"
checked
/>すべて
<input type="radio" name="taskradio" id="radio-work" value="work" />作業中
<input
type="radio"
name="taskradio"
id="radio-complete"
value="complete"
/>完了
</div>
<table>
<thead>
<tr class="text-xl font-extrabold font-serif">
<th class="px-1">ID</th>
<th class="px-1">コメント</th>
<th class="px-1">状態</th>
</tr>
</thead>
<tbody id="tbody" name="tbody"></tbody>
</table>
<p class="text-2xl font-black font-serif pt-4">新規タスクの追加</p>
<div class="pt-4">
<input
type="text"
id="tasks"
class="border border-gray-500"
name="tasks"
/>
<input type="button" id="addbutton" value="追加" class="rounded" />
</div>
<script src="index.js"></script>
</body>
</html>
0
