0

Tengo el siguiente código:

const hover = document.getElementsByClassName('child');

hover[0].addEventListener('mouseover', () => {
         hover[0].style.backgroundColor = 'red';                 
                          });

hover[0].addEventListener('mouseout', () => {
         hover[0].style.backgroundColor = null;                 
                          });

hover[1].addEventListener('mouseover', () => {
         hover[1].style.backgroundColor = 'red';                 
                          });

hover[1].addEventListener('mouseout', () => {
         hover[1].style.backgroundColor = null;                 
                          });

hover[2].addEventListener('mouseover', () => {
         hover[2].style.backgroundColor = 'red';                 
                          });

hover[2].addEventListener('mouseout', () => {
         hover[2].style.backgroundColor = null;                 
                          });

//EL PROBLEMA ES ESTE CICLO FOR (Quiero hacer lo mismo de arriba, pero con un ciclo for)

/*for (var x=0; x<hover.lenght; x++){
  hover[x].addEventListener('mouseover', () => {
         hover[x].style.backgroundColor = 'red';                 
                          });

hover[x].addEventListener('mouseout', () => {
         hover[x].style.backgroundColor = null;                 
                          });
}*/
body {
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: space-between;
  max-width: 500px;
  height: 300px;
  align-items: center;
}

div, p {
  margin: 0;
  padding: 0;
}

.child:nth-child(1) {
  background-color: green;
  color: blue;
}

.child:nth-child(2) {
  background-color: lightgreen;
  color: gray;
}

.child:nth-child(3) {
  background-color: purple;
  color: lightblue;
}

div {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  user-select: none;
  cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="child">
    <p>Circle 1</p>
  </div>
  <div class="child">
    <p>Circle 2</p>
  </div>
  <div class="child">
    <p>Circle 3</p>
  </div>
</body>
</html>

Como pueden ver, accedí a todas las clases con el nombre de 'child', y posteriormente realice un cambio del color de fondo de los círculos con un addEventListener. Si me sale lo que yo quiero, pero el problema es que no quiero que abarque muchas lineas de código (ya que este es sólo un ejemplo de un proyecto más grande), y para ello pensé en un ciclo for, pero no me funciona, y ya intenté también con un ciclo do-while. Alguna respuesta del porque no me está funcionando?

1 respuesta 1

2

const hover = document.getElementsByClassName('child');

//EL PROBLEMA ES ESTE CICLO FOR (Quiero hacer lo mismo de arriba, pero con un ciclo for)

for (var x = 0; x < hover.length; x++){
  hover[x].addEventListener('mouseover', ev => {
     ev.currentTarget.style.backgroundColor = 'red';                 
  });

  hover[x].addEventListener('mouseout', ev => {
     ev.currentTarget.style.backgroundColor = null;                 
  });
}
body {
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: space-between;
  max-width: 500px;
  height: 300px;
  align-items: center;
}

div, p {
  margin: 0;
  padding: 0;
}

.child:nth-child(1) {
  background-color: green;
  color: blue;
}

.child:nth-child(2) {
  background-color: lightgreen;
  color: gray;
}

.child:nth-child(3) {
  background-color: purple;
  color: lightblue;
}

div {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  user-select: none;
  cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="child">
    <p>Circle 1</p>
  </div>
  <div class="child">
    <p>Circle 2</p>
  </div>
  <div class="child">
    <p>Circle 3</p>
  </div>
</body>
</html>

Le tuve que hacer solo una pequeña modificacion al codigo, pues lo del ciclo for efectivamente no funcionaba, pero entonces se me ocurrio usar el evento que nos provee el evento oyente para poder hacer uso de las propiedades de ese elemento.

No tengo idea del porque esto no funciona bien:

hover[x].style.backgroundColor = 'red';

Pero esto de aqui si:

ev.currentTarget.style.backgroundColor = 'red';

Por lo tanto los unicos cambios que hice fue dentro de los eventos:

hover[x].addEventListener('mouseover', ev => {
 ev.currentTarget.style.backgroundColor = 'red';                 
});

hover[x].addEventListener('mouseout', ev => {
  ev.currentTarget.style.backgroundColor = null;                 
});

como vemos no solo tiene un evento anadido, si no que ademas usamos el currentTarget para acceder al elemento del evento, ya que al parecer asi si se encuentra definido el elemento.

2
  • Por cierto, eso que tienes es mucho mas rapido y sencillo de hacer con CSS, en css existe la pseudoclase :hover, la cual permite el efecto deseado usando solo CSS, para que no tengas que anadir eventos ni desde el HTML ni desde Javascript.
    – Layer
    Commented el 17 jul. 2020 a las 21:14
  • Lo sé, pero para este ejemplo quise hacer algo sencillo, aunque ahora que lo veo no tiene mucho sentido si no se aplica a otro ejemplo. Y gracias por tu respuesta, me ayudo bastante.
    – JesseBelt
    Commented el 17 jul. 2020 a las 21:24

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.