Soy principiante y me propuse un desafío: crear un modo oscuro para mi cartera con funciones JS.
html:
<nav class="navbar dark-mode" id="navbar"> <ul class="navbar_links"> <li class="navbar_link first"><a href="#">Accueil</a></li> <li class="navbar_link second"><a href="#">Service</a></li> <li class="navbar_link third"><a href="#">Mission</a></li> <li class="navbar_link fourth"><a href="#">Portfolio</a></li> <li class="navbar_link fifth"><a href="#">Contact</a></li> </ul> <img id="lightModeIcon" src="img/light-mode.png" alt=""> </nav>JAVASCRIPT:
function lightMode() { const lightModeIcon = document.getElementById('lightModeIcon'); const navbar = document.getElementById('navbar'); if (navbar.classList.contains("dark-mode")) { lightModeIcon.addEventListener('click', () => { navbar.classList.replace("dark-mode", "light-mode"); lightModeIcon.src = "img/dark-mode.png"; }) } else { lightModeIcon.addEventListener('click', () => { navbar.classList.replace("light-mode", "dark-mode"); lightModeIcon.src = "img/light-mode.png"; }) } } lightMode();Pero tengo un problema. Yo uso "si...esle".
La parte "si" funciona. Pero la parte "else" no funciona.
Normalmente, si el usuario ya ha hecho clic en el botón de modo oscuro, mi #navbar no contiene la clase "modo oscuro" sino ".modo claro". Entonces la parte "else" debería ejecutarse.
Piensa en cuándo se está ejecutando el código.
dark-mode está codificado en HTMLlightMode se llama cuando se carga la página.if vincula uno de los dos detectores de eventos. La condición para la rama else nunca es verdadera cuando se ejecuta la función.
Escriba un solo detector de eventos, vincúlelo siempre al botón, pruebe cuál es el estado actual dentro del detector de eventos.
Tenga en cuenta que puede detectar que el modo del sistema operativo del usuario ha elegido su esquema en función de eso en lugar de tener una interfaz de usuario completamente separada del resto del sistema del usuario.
Está ejecutando esta función una vez (presumiblemente cuando se carga la página), que evaluará la condición una vez y registrará un detector de eventos único (ya sea el que establece la clase en modo oscuro o el que lo establece en modo claro) . Como tal, los clics harán lo mismo para la totalidad.
En su lugar, debe mover su verificación if-else dentro del detector de eventos, de modo que esté verificando las clases en el momento del clic. Esto puede ser tan simple como invertir las líneas tercera y cuarta de su función, por ejemplo:
const lightModeIcon = document.getElementById('lightModeIcon'); const navbar = document.getElementById('navbar'); // Always add this single event listener lightModeIcon.addEventListener('click', () => { // Check the condition inside the listener, take action based on the current state if (navbar.classList.contains("dark-mode")) { navbar.classList.replace("dark-mode", "light-mode"); lightModeIcon.src = "img/dark-mode.png"; } else { navbar.classList.replace("light-mode", "dark-mode"); lightModeIcon.src = "img/light-mode.png"; } });