Estoy aprendiendo e intentando agregar el botón de modo oscuro a mi sitio. Tengo botón de interruptor de trabajo y CSS. Pero cuando quiero agregar a la clase de cuerpo "oscuro", la función de alternar no funciona correctamente. La función agregar y eliminar funciona, pero no quiero resolverlo con "si".
const switchButton = document.querySelector(".switch") switchButton.addEventListener("click", () => { document.querySelector("body").classList.toggle("dark") })Cuando reemplazamos alternar por agregar, funciona bien.
Aquí está la página en vivo: https://gearlistmaker.com/
Y aquí está el código: https://github.com/jankamon/GearListMaker
El evento de clic se activa dos veces debido al burbujeo del evento
Puede marcar el estado de la casilla de verificación, que tiene más sentido y es más seguro
https://jsfiddle.net/mplungjan/7hfv5ynb/
switchButton.addEventListener("click", (e) => { document.querySelector("body").classList.toggle("dark", switchButton.querySelector("input[type=checkbox]").checked) })El interruptor tiene una entrada en su interior. Creo que esto hace que el evento de clic suba hasta el elemento del interruptor y hace que la palanca se dispare dos veces. Intente agregar lo siguiente para que solo se active un evento de clic:
document.querySelector(".switch > input").addEventListener("click", (e) => { e.stopPropagation(); })Alternativamente, adjunte el evento a la entrada:
const switchButtonInput = document.querySelector(".switch > input") switchButtonInput.addEventListener("click", () => { document.querySelector("body").classList.toggle("dark") }); body.dark { background-color: grey; } .switch { padding: 10px; border: 1px solid black; } .switch > input { display: none; } <label class="switch"> <input type="checkbox"> toggle </label>Su código está funcionando bien. Compruebo el cheque es el cheque, luego tomo una decisión. Si el check está marcado apaga la luz con añadir clase al cuerpo, si no está marcado quita la clase dark...
const switchButton = document.querySelector(".switch") const body = document.querySelector("body"); switchButton.addEventListener("click", () => { switchButton.checked ? body.classList.add("dark") : body.classList.remove("dark"); }) body.dark {background:black;} body {background:white;} <input type="checkbox" class="switch dark">Toggle dark</ button>