0

Hice esto para cambiar a modo oscuro un website (me base en un tutorial), cambia el color y todo pero la imagen NO, revise el código JS y nada. Tal vez sea la parte del if, pero nada. Agradecería su ayuda.


let toggle = document.getElementById("toggle");
let label = document.getElementById("label");
toggle.addEventListener("change", (event) => {
  let estado = event.target.checked;
  document.body.classList.toggle("dark-mood");
  if (estado == true) {
    label.innerHTML = '<img src="assets/ico/ico-sun.png" alt="sun mood" class="ico-mood"/>';
  } else {
    label.innerHTML = '<img src="assets/ico/ico-moon.png" alt="dark mood" class="ico-mood"/>';
  }
});
<div class="c-toggle-mood">
  <label for="toggle" id="label_toggle" class="label-toggle">
        <img
          src="assets/ico/ico-moon.png"
          alt="dark mood"
          class="ico-mood"
        />
      </label>
  <input type="checkbox" id="toggle">
</div>

2
  • Creo que podría ser solo estado. Por ejemplo: if (estado) porque estado ya es true ... el 10 ene. a las 0:38
  • Gracias por la respuesta. Sin embargo, ya lo probé y nada :( el 10 ene. a las 0:47

1 respuesta 1

0

Buen día,

El problema es porque no tienes un elemento con id = label así que hay que modificar la segunda línea de tu código por

let label = document.getElementById("label_toggle");

Ya que tu etiqueta label tiene el id label_toggle

<label for="toggle" id="label_toggle" class="label-toggle">

Ejemplo completo:

let toggle = document.getElementById("toggle");
let label = document.getElementById("label_toggle");
toggle.addEventListener("change", (event) => {
  let estado = event.target.checked;
  document.body.classList.toggle("dark-mood");
  if (estado == true) {
    label.innerHTML = '<img src="assets/ico/ico-sun.png" alt="sun mood" class="ico-mood"/>';
    console.log('sun');
  } else {
    label.innerHTML = '<img src="assets/ico/ico-moon.png" alt="dark mood" class="ico-mood"/>';
    console.log('dark');
  }
});
<div class="c-toggle-mood">
  <label for="toggle" id="label_toggle" class="label-toggle">
        <img
          src="assets/ico/ico-moon.png"
          alt="dark mood"
          class="ico-mood"
        />
      </label>
  <input type="checkbox" id="toggle">
</div>

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.