Me estoy desafiando a mí mismo al crear un sitio web que tenga un modo oscuro y otro claro.
Cuando la casilla de verificación está marcada, agrega la clase "claro" en el encabezado, por ejemplo, el modo oscuro es el predeterminado.
Creé un script pero no encontré la solución y por qué no funciona, ¿alguien puede ayudarme en esta dirección?
Aquí está mi código:
let header = document.getElementsByClassName('header'); let switcher = document.querySelector('#switch'); switcher.addEventListener('click',function(){ if(this.checked){ header.classList.add('light'); } else{ header.classList.remove('light'); } }) <div class="header "> <div class="title-section"> <h1>Social Media Dashboard</h1> <p>Total Followers: 23,004</p> </div> <div class="switchbtn"> <label for="switch" id="switchlabel">Dark Mode</label> <input type="checkbox" name="switch" id="switch"> </div> </div>Casi, solo te faltaba un índice para document.getElementsByClassName. Esto devuelve una matriz de elementos coincidentes. Debido a que solo tiene uno, puede obtener el primero en la matriz sin problema.
Así que todo lo que necesitas cambiar es:
documento.getElementsByClassName a documento.getElementsByClassName[0]
¡y estás listo para irte!
let header = document.getElementsByClassName('header')[0]; let switcher = document.querySelector('#switch'); switcher.addEventListener('click',function(){ if(this.checked){ header.classList.add('light'); } else{ header.classList.remove('light'); } }) <div class="header "> <div class="title-section"> <h1>Social Media Dashboard</h1> <p>Total Followers: 23,004</p> </div> <div class="switchbtn"> <label for="switch" id="switchlabel">Dark Mode</label> <input type="checkbox" name="switch" id="switch"> </div> </div>Puede acceder al HTML del encabezado ingresando dentro de la colección, así que intente usar
getElementsByClassName('header')[0].Prefiero usar querySelector() para agregar y eliminar clases, es más simple.
Hice algunos cambios en el código para que puedas tener una base y empezar a trabajar. Cambié getelementsbyclassname a getElementById ya que el primero devolverá una matriz de todos los elementos con este nombre de clase.
let header = document.getElementById("header"); let switcher = document.querySelector('#switch'); switcher.addEventListener('click',function(){ if(this.checked){ header.classList.add("dark"); } else{ header.classList.remove("dark"); } }) .dark { color: white; background: black; } <div id="header"> <div class="title-section"> <h1>Social Media Dashboard</h1> <p>Total Followers: 23,004</p> </div> <div class="switchbtn"> <label for="switch" id="switchlabel">Dark Mode</label> <input type="checkbox" name="switch" id="switch"> </div> </div>Además, lo hice blanco por defecto y oscuro cuando haces clic. Espero eso ayude.