Tengo este script, pero necesito cambiar la clase a "ir" o "detener". actualmente puedo activar ambos para cambiar a la clase pero debería cambiar a uno u otro
Código
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>Está agregando la clase al botón en el que se hizo clic, pero nunca eliminando la clase del otro botón.
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>