Vanilla JS+Tailwind DOM操作问题：按钮切换无响应排查

需求是点击「Mark as Complete」按钮时隐藏该按钮并显示「Completed!」按钮，点击「Completed!」时反向切换，通过添加/移除hidden类实现，但绑定事件后DOM没有预期变化。

错误原因 #

1. 绑定incompleteButton的点击事件时，第三个参数传了未定义的bgchange——addEventListener的第三个参数应为布尔值（控制事件捕获/冒泡）或选项对象，传未定义变量会导致事件绑定异常。
2. 两个切换函数逻辑重复，完全可以合并简化。

修复后的代码 #

HTML（无需修改） #

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

修复后的JS代码 #

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

// 移除多余参数，用同一个处理函数绑定两个按钮
incompleteButton.addEventListener("click", toggleButtonStatus);
completedButton.addEventListener("click", toggleButtonStatus);

function toggleButtonStatus() {
    // 直接切换两个按钮的hidden类，无需额外判断
    incompleteButton.classList.toggle("hidden");
    completedButton.classList.toggle("hidden");
}

说明 #

• 去掉addEventListener中多余的bgchange参数，确保事件正常绑定。
• 用classList.toggle()替代手动判断类的添加/移除，简化代码的同时，保证切换逻辑的稳定性——无论初始状态如何，都能完成双向切换。

内容的提问来源于stack exchange，提问作者Saad Masood