Creé un botón de alternar el modo oscuro para mi sitio web de demostración que agrega una clase para cambiar el color de fondo. El botón funciona, pero quiero intercambiar la imagen que usa el botón dependiendo de si la clase está presente. No funciona. Creo que he estropeado MutationObserver de alguna manera, ¿alguien puede ayudarme?
let buttonIMG = document.getElementById("darkButtonIMG"); const observer = new MutationObserver(darkImage); observer.observe(buttonIMG, { attributes: true }); function darkImage() { let buttonIMG = document.getElementById("darkButtonIMG"); let buttonSRC = buttonIMG.hasAttribute("dark"); if (buttonSRC === true) { buttonIMG.setAttribute("src", "images/Sun_Icon.png"); } else { buttonIMG.setAttribute("src", "images/Moon_Icon.png"); } }HTML
<nav> <div class="row"> <button class="buttonHide" id="hamburgerBtn">☰</button> <ul id="navOpen"> ... <li><button id="darkButton" type="button" class=""><img id="darkButtonIMG"src="images\Moon_Icon.png" alt="Dark mode icon"></button></li> </ul> </div> <!-- End of Navbar Row --> </nav>Quiero intercambiar la imagen que usa el botón dependiendo de si la clase está presente.
Supongo que cuando haces clic en el botón, le agregas una clase oscura.
En su método de devolución de llamada, está verificando la presencia de un atributo oscuro, pero en su lugar debe verificar la presencia de una clase.
let buttonSRC = buttonIMG.classList.contains("dark");Debe hasAttribute el atributo para verificar setAttribute
let buttonIMG = document.getElementById("darkButtonIMG"); const observer = new MutationObserver(darkImage); observer.observe(buttonIMG, { attributes: true }); function darkImage() { let buttonIMG = document.getElementById("darkButtonIMG"); let buttonSRC = buttonIMG.hasAttribute("dark"); if (buttonSRC === true) { buttonIMG.setAttribute("src", "images/Sun_Icon.png"); buttonIMG.removeAttribute("dark"); } else { buttonIMG.setAttribute("src", "images/Moon_Icon.png"); buttonIMG.setAttribute("dark", "dark"); } }