1

El problema es el siguiente, estoy tratando de seleccionar varios elementos con una misma clase y una vez seleccionados los elementos agregarle otra clase con estilos definidos.

Esto lo hago de la siguiente manera:

HTML

<div class="container-button">
  <button id="google-search-button" class="btn">Buscar con Google</button>
  <button id="i-feel-lucky" class="btn">Me siento con suerte</button>
</div>

CSS

.main
.container-button
.btn-dark {
    background-color: #303134; 
    color: #e4e6e9; 
    border: none;
}

JavaScript

const theme = document.getElementById("theme");
theme.addEventListener("click", (e)=>{
  const button = document.querySelector(".btn");
  button.classList.add("btn-dark");
})

El problema es que este código solo me agrega los estilos al primer elemento

introducir la descripción de la imagen aquí

Y si cambio la forma en que secciono los elementos HTML con la clase, para poder seleccionar todos, no me funciona:

JavaScript

const theme = document.getElementById("theme");
theme.addEventListener("click", (e)=>{
  const button = document.querySelectorAll(".btn");
  button.classList.add("btn-dark");
})

introducir la descripción de la imagen aquí

Espero que puedan ayudarme.

4
  • 3
    querySelectorAll() te devuelve una lista de nodos, no puedes asignar directamente estilos, tienes que recorrer para hacerlo uno por uno, como en el ejemplo, dentro del forEach es donde agregas la nueva clase.
    – Triby
    Commented el 4 abr. 2022 a las 15:57
  • ¿Esta sería la sintaxis? const button = document.querySelectorAll(".btn"); button.forEach(function() {button.classList.add("btn-dark");}); Commented el 4 abr. 2022 a las 16:27
  • @FrancoAgustínCarballar, tenes un error, fijate como se usar forEach
    – Marcos
    Commented el 4 abr. 2022 a las 16:38
  • Muchas gracias por tu ayuda, ya lo pude resolver Commented el 4 abr. 2022 a las 17:30

1 respuesta 1

2

Gracias a la ayuda de @Triby lo puede resolver de la siguiente manera:

JavaScipt

const button = [...document.querySelectorAll(".btn")];
button.forEach(function(elemento, index, arreglo) {
  arreglo[0].classList.add("btn-dark");
  arreglo[1].classList.add("btn-dark");
});
1
  • Con un solo parámetro es suficiente, elemento y, dentro de la función elemento.classList.add('btn-dark');
    – Triby
    Commented el 4 abr. 2022 a las 17:39

Tu Respuesta

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

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