为何if条件初始化后，按钮onclick事件无法实现类的添加/移除切换？

问题根源 #

你的代码在页面加载完成后只执行了一次if-else判断，仅根据按钮初始文本绑定了对应的点击事件。当第一次点击按钮后，按钮文本变为"Remove Class"，但此时并没有重新执行判断逻辑去绑定移除类的事件——按钮的点击事件还是最初绑定的添加类的函数，所以再次点击时只会重复执行添加操作，自然无法移除类。

解决方法 #

你需要把判断逻辑放到点击事件的内部，让每次点击按钮时都重新检查当前状态，再执行对应操作。以下是两种实现方式：

方式一：根据按钮当前文本判断

"use strict";
const mainDiv = document.getElementById("main");
const myButton = document.querySelector("button");

myButton.onclick = function() {
  if (this.textContent === "Add Class") {
    mainDiv.classList.add("added-from-js");
    this.textContent = "Remove Class";
  } else if (this.textContent === "Remove Class") {
    mainDiv.classList.remove("added-from-js");
    this.textContent = "Add Class";
  } else {
    console.log("there is a problem in your code");
  }
};

方式二：根据元素类的状态判断（更可靠）

这种方式不依赖按钮文本，直接检查目标元素是否包含指定类，避免因按钮文本意外修改导致的逻辑失效：

"use strict";
const mainDiv = document.getElementById("main");
const myButton = document.querySelector("button");

myButton.onclick = function() {
  if (mainDiv.classList.contains("added-from-js")) {
    mainDiv.classList.remove("added-from-js");
    this.textContent = "Add Class";
  } else {
    mainDiv.classList.add("added-from-js");
    this.textContent = "Remove Class";
  }
};

内容的提问来源于stack exchange，提问作者ahmed salah