I am attempting to hide the "mark as complete" button and replace it with a "completed" button by switching the classes from "hidden" to "completed" and vice versa. However, when I use an event listener to manipulate the DOM with the code provided below, the changes are not reflected in the button itself.
const incompleteButton = document.querySelector(".Mark_complete");
const completedButton = document.querySelector(".completed");
incompleteButton.addEventListener("click", statusChanger, bgchange);
completedButton.addEventListener("click", statusChangerAgain);
function statusChanger() {
if (completedButton.classList.contains("hidden")) {
completedButton.classList.remove("hidden");
incompleteButton.classList.add("hidden");
}
}
function statusChangerAgain() {
if (incompleteButton.classList.contains("hidden")) {
incompleteButton.classList.remove("hidden");
completedButton.classList.add("hidden");
}
}<div class="manager bg-white h-[70%] w-[70%] grid grid-cols-1 grid-rows-4 gap-2 shadow-2xl
shadow-gray-500">
<div class="grid_item_1 bg-slate-300 flex justify-start items-center">
<div class="status_heading">
<p class="status text-3xl ml-8 mr-80">
Name
</p>
</div>
<div class="name_heading">
<p class="name text-3xl mr-64">
Status
</p>
</div>
<div class="delete_heading">
<p class="delete text-3xl">
Delete
</p>
</div>
</div>
<div class="grid_item bg-red-400 flex justify-start items-center text-lg">
<div class="task_name ml-8 mr-64">
<p class="task_detail">
<button>Call Mom!</button>
</p>
</div>
<button class="Mark_complete mr-52 bg-gray-200 p-6 rounded-lg hover:scale-105">Mark as Complete</button>
<button class="completed mr-52 bg-green-400 p-6 rounded-lg hover:scale-105 hidden">Completed!</button>
<button class="Delete bg-red-500 p-6 rounded-lg hover:scale-105">Delete</button>
</div>The script links and CSS links have been properly added, ruling out any issues from that side