let dark = true; function toggle() { dark = false; document.body.classList.toggle('dark-mode'); } if (dark = false) { document.getElementById("logo").src="../../img/Kevin D (White).png"; }else { document.getElementById("logo").src="../../img/Kevin D (Black).png"; }Arriba está mi código. Cada vez que hago clic en el botón, la imagen no pasa a la versión en blanco, sino que permanece negra incluso sobre un fondo negro, ¿cómo solucionaría esto? El código también está adjunto a un botón que llamaría a esa función.
Hay algunas cosas que resolver aquí:
if cuando cambia la variable, lo hacemos envolviéndolo en una función, luego llamándolo al cargar y cada vez que se llama al conmutador.!dark para invertirlo cada vez.if actualmente está asignando el valor false a la variable dark , necesitamos compararlo en su lugar, y dado que ya es un booleano, puede ser simplemente if (dark) {} var dark = true; function toggle() { dark = !dark; // To actually toggle the variable you need to invert the current value document.body.classList.toggle('dark-mode'); // After the variable is toggle, call the function to update the theme changeTheme() } function changeTheme() { if (dark) { console.log("It's dark!") } else { console.log("It's light!") } } // Call the function on load to set the initial theme changeTheme() // Add an event listener to call the toggle function document.getElementById("toggle").addEventListener("click", toggle); <div id="toggle">Toggle</div>dark = !dark , por lo que siempre se establece en lo contrario.if(dark === false) puedes simplemente verificar if(!dark) o mejor cambiar la lógica para no comenzar con una negación y decir if(dark){'dark'}else{'not dark} let dark = true; function toggle() { dark = !dark; document.body.classList.toggle('dark-mode'); if (dark === false) { console.log('dark ===', dark, '>> set white img') // document.getElementById("logo").src = "../../img/Kevin D (White).png"; } else { console.log('dark ===', dark, '>>set black img') // document.getElementById("logo").src = "../../img/Kevin D (Black).png"; } } .dark-mode { background: black; color: white; } <button onclick="toggle()">toggle</button>Tienes un error con el signo =. debería ser ==
if (dark == false) {