如何在javascript中单击按钮更改类

Question

我有这个脚本，但是需要将课程更改为“ go”或“停止”。目前，我可以将两者都更改为课程，但应该更改为一个或另一个

代码

var form = document.querySelector("form");

form.addEventListener("click", function(event) {
  event.preventDefault();
  const classId = event.target.id;

  if (classId == "go") {
    event.target.className = "go";
  } else if (classId == "stop") {
    event.target.className = "stop";
  }
});

.go {
  background: green;
  color: white;
}

.stop {
  background: red;
  color: white;
}

<form action="">
  <button id="go">GO!</button>

  <button id="stop">STOP!</button>
</form>

Answer 1

您将课程添加到单击按钮中，但切勿从另一个按钮中删除类。

var form = document.querySelector("form");
const goButton = document.querySelector("#go");
const stopButton = document.querySelector("#stop");

form.addEventListener("click", function(event) {
  event.preventDefault();
  if (event.target == goButton) {
    goButton.classList.add("go");
    stopButton.classList.remove("stop");
  } else if (event.target == stopButton) {
    stopButton.classList.add("stop");
    goButton.classList.remove("go");
  }
});

.go {
  background: green;
  color: white;
}

.stop {
  background: red;
  color: white;
}

<form action="">
  <button id="go">GO!</button>

  <button id="stop">STOP!</button>
</form>