0

estoy intentando modificar el html de las etiquetas h1 cuando paso el ratón por encima. Estoy practicando con el escuchador de eventos, pero no se me aplican los cambios. Espero vuestras respuestas,

gracias.

CÓDIGO HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="miscript.js"></script>
</head>
<body>
    <h1 id="texto">Pasa por encima para cambiar el html</h1>

</body>
</html>


SCRIPT:

window.onload=function(){

    document.getElementsByTagName("h1").addEventListener("mouseover",cambiarHtml);
}

function cambiarHtml(){ 

    this.innerHTML = "Texto cambiado";
}

1 respuesta 1

6

El problema es que document.getElementsByTagName("h1") devuelve un array de elementos por lo que debes acceder al elemento deseado (en este caso el 0) para añadirle el evento. Si te fijas en la consola te dará el siguiente error:

Uncaught TypeError: document.getElementsByTagName(...).addEventListener is not a function at window.onload (js:26)

Te dejo aquí el código funcionando.

Edito: Como bien indica @JDev, el OP desea añadir el evento a todos los h1. Para ello te pongo un ejemplo con un for sencillo aunque podrías explorar otras opciones como forEach o for in:

window.onload=function(){
    let h1Elts = document.getElementsByTagName("h1");
    for(let i=0;i<h1Elts.length;i++){
      h1Elts[i].addEventListener("mouseover",cambiarHtml);
    }
}

function cambiarHtml(){ 
    this.innerHTML = "Texto cambiado";
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="miscript.js"></script>
</head>
<body>
    <h1 id="texto">Pasa por encima para cambiar el html</h1>
    <h1 id="texto">Pasa por encima para cambiar el html</h1>
    <h1 id="texto">Pasa por encima para cambiar el html</h1>
    <h1 id="texto">Pasa por encima para cambiar el html</h1>
</body>
</html>

Aquí más info.

2
  • Ojo, lo requiere para todos los h1no solo para el primero. Cambialo por un forEach
    – JDev
    Commented el 15 feb. 2019 a las 13:33
  • Tienes toda la razón. Lo cambio.
    – Kiko_L
    Commented el 15 feb. 2019 a las 13:33

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.