0

el problema que quiero solucionar es el siguiente:

Tengo un div con un id llamado "grupo"(seria el contenedor padre) y dentro tengo tres divs mas que son tarjetas de color gris, cada uno de esos divs tienen un id, ejemplo, el primero tiene "tarjeta1" y asi con los demas.

Lo que quiero hacer mediante el dom de javascript es que, por ejemplo,al hacer click en la primer tarjeta se ponga roja cuando clickeo la segunda se ponga violeta y que la anterior vuelva a estar gris,asi con todas

Podria hacer esto iterando al div "grupo" y segun los id de sus hijos,cambiarlos a un color diferente?

Como hago esto?

3
  • Agrega tu trabajo del evento click y tu HTML para darte una respuesta Commented el 4 nov. 2022 a las 3:39
  • Buenas noches, sería recomendable que leas Cómo preguntar, para que podamos ayudarte, para evitar votos negativos y el posible cierre de tu pregunta. En general lo ideal es que envíes lo que se conoce como código mínimo verificable, es decir lo mínimo necesario para poder realizar las pruebas pertinentes, identificar el error y poder ayudarte en el menor tiempo posible. Commented el 4 nov. 2022 a las 3:41
  • Pulsa en editar y muestra un ejemplo mínimo verificable de lo que has intentado hasta el momento. Stack Overflow en español no es un servicio de código. Lee Cómo preguntar.
    – padaleiana
    Commented el 4 nov. 2022 a las 10:14

1 respuesta 1

0

Con document.querySelectorAll obtienes una lista de elementos y luego con la función forEach iteras sobre ellos, tal cual como el ejemplo que te he puesto

const COLOR_DEFAULT = "gray";
function chagecolor(elemento, color){
  chageTodosColor();
  elemento.style.backgroundColor = color;
}
function chageTodosColor(){
 document.querySelectorAll("#grupo > div").forEach(e =>{
   e.style.backgroundColor = COLOR_DEFAULT;
 });
}
#grupo{
  display:flex;
  gap:10px;
}

#grupo > div{
 width: 100px;
 height: 200px;
 background-color:gray;
 transition: background-color 1s;
}
<div id="grupo">
  <div id="tarjeta1" onclick="chagecolor(this, 'red')"></div>
  <div id="tarjeta2" onclick="chagecolor(this, 'violet')"></div>
  <div id="tarjeta3" onclick="chagecolor(this, 'green')"></div>
</div>

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.