Estoy tratando de hacer un botón de modo oscuro para mi sitio web. mi idea es usar un evento al hacer clic para cambiar el lado de mi interruptor de botón de izquierda a derecha y de derecha a izquierda. funciona en mi primer clic, cambia de izquierda a derecha (de apagado a encendido). Pero cuando trato de cambiarlo de nuevo, no pasa nada. Aquí está mi código
const buttonmode = document.querySelector("#darkmode"); const switchmode = document.querySelector("#darkswitch"); buttonmode.addEventListener("click",(e) =>{ e.preventDefault(); if(switchmode.style.float="left"){ switchmode.style.float="right"; } else if(switchmode.style.float="right"){ switchmode.style.float="left"; } }); heres my css button span{ display: block; background: #999; height: 26px; width: 26px; border-radius: 50%; margin-left: 2px; float: left; }En su declaración condicional, para verificar cuál es el valor float actual, debe usar == no solo =
const buttonmode = document.querySelector("#darkmode"); const switchmode = document.querySelector("#darkswitch"); buttonmode.addEventListener("click",(e) =>{ e.preventDefault(); if(switchmode.style.float == "left") { switchmode.style.float="right"; } else { switchmode.style.float="left"; } }); #darkswitch { width:50px; height:50px; background:black; } <button id="darkmode">Dark Mode</button> <div id="darkswitch"></div>Yo sugeriría usar classList.toggle
const themeSwitcher = document.getElementById("themeSwitcher"); themeSwitcher.addEventListener("click", function () { this.classList.toggle("dark"); }); #themeSwitcher { width: 70px; height: 30px; border-radius: 50px; background-color: #ffffff; border: 2px solid #252525; } #toggler { float: left; width: 30px; height: 30px; background-color: #000000; border-radius: 50%; } .dark #toggler { float: right; } <div id="themeSwitcher"> <div id="toggler"></div> </div>Su problema es que switchmode variable de modo de cambio fuera de la función y la reutiliza en su función. Cada vez que se actualiza DOM, su variable no se actualiza como esperaba. Debería obtener el modo de switchmode nuevamente para las próximas actualizaciones en la función.
También tienes un pequeño problema aquí.
if(switchmode.style.float="left") Debería ser === en lugar de = para la condición if-else.
const buttonmode = document.querySelector("#darkmode"); buttonmode.addEventListener("click",(e) =>{ e.preventDefault(); const switchmode = document.querySelector("#darkswitch"); //move it here if(switchmode.style.float==="left"){ switchmode.style.float="right"; } else if(switchmode.style.float==="right"){ switchmode.style.float="left"; } });