0

llamo por medio de document.querySelectorAll('p'), esto me arroja un array. y luego creo un for para recorrer cada elemento del array y a cada elemento de array le agrego un método addEventListener(), por lo tanto la función que ejecuta, permite crear un style background-color a todos los <p> ,pero al momento de crear las instrucciones de la función, me dice que es la propiedad style esta undefined

¿cómo puedo mejorar el código para que pueda agregar estos estilos al invocar el evento?

    var p = document.querySelectorAll('p');
  
    for (var i = 0; i < 3; i++){
                p[i].addEventListener('mouseover', function () {
                    // console.log(p[i]);
                    p[i].style.backgroundColor = 'green';
                });
            }
p {
     text-align: center;
     font-size: 1.5em;
     font-family: sans-serif;
}
        <section>
        <article>
                <p>Contenidos pagina 1</p>
                <p>Contenidos pagina 2</p>
                <p>Contenidos pagina 3</p>
        </article>
</section>

1 respuesta 1

1

var p = document.querySelectorAll('p');
  
    for (var i = 0; i < 3; i++){
                p[i].addEventListener('mouseover', function () {
                    // console.log(p[i]);
                    this.style.backgroundColor = 'green';
                });
            }
p {
     text-align: center;
     font-size: 1.5em;
     font-family: sans-serif;
}
<section>
        <article>
                <p>Contenidos pagina 1</p>
                <p>Contenidos pagina 2</p>
                <p>Contenidos pagina 3</p>
        </article>
</section>

Estás usando una función tradicional, puedes aprovechar y usar this en vez de p[i]

p[i] te causará un error ya que los elementos ya fueron recorridos

Además, no necesitas un for, puedes usar un forEach

var p = document.querySelectorAll('p');
  
    p.forEach(el => {
                el.addEventListener('mouseover', function () {
                    // console.log(p[i]);
                    this.style.backgroundColor = 'green';
                });
            });
p {
     text-align: center;
     font-size: 1.5em;
     font-family: sans-serif;
}
<section>
        <article>
                <p>Contenidos pagina 1</p>
                <p>Contenidos pagina 2</p>
                <p>Contenidos pagina 3</p>
        </article>
</section>

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.