javascript tailwind-css dom-manipulation

Can manipulate DOM using tailwind CSS - Vanilla JS project

I want to hide "mark as complete button" and replace it with completed button by replacing the class "hidden" in the "completed" button and adding it to "mark as complete" button. but When I try to update or manipulate the dom using event listener using the code given below. the dom does not show any changes in the button i.e. it seems it's not being manipulated.

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 are properly added so no problems from that side

Solution

Remove bgchange from this line incompleteButton.addEventListener("click", statusChanger, bgchange) this will solve your problem, also you don't need to repeat yourself you can achieve the same functionality with only one function, like this:

const incompleteButton = document.querySelector(".Mark_complete");
const completedButton = document.querySelector(".completed");

incompleteButton.addEventListener("click", statusChanger);
completedButton.addEventListener("click", statusChanger);

function statusChanger(e) {
e.target.classList.add("hidden");
  if(e.target == incompleteButton){
      completedButton.classList.remove("hidden");
  } else if(e.target == completedButton){
     incompleteButton.classList.remove("hidden");
  }
}

.hidden {
  display:none;
}

<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>