1

Estoy atascado en un código con ES6. Trato de crear una función el cual dando click en un parrafo html esta función me despliegue un saludo.

<body>
 <p >hola</p>  
</body>

<script>
let p=document.getElementsByTagName("p")[0];
let saludos=()=> {return "greetings every body";}
p.innerHTML=saludos();
/*es aquí donde no entiendo, quiero hacer un evento el cual  
al hacer click en el párrafo se despliega el saludo */
P.addEvetListener("click",saludos);
</script>

Le doy run y el saludo se ejecuta automáticamente sin necesidad de dar click en el párrafo, no se como hago para que no se me adelante. esto solo me pasa usando Ema pero si uso la función tradicional de javascript como por ejemplo function saludos(){/codigo/} aquí si me sale perfecto.

2 respuestas 2

1
  • No deberías recuperar usando la función elementsByTagName pues esta te devolvería todas las etiquetas p existentes, pero en tu propio escenario solo tienes una, entonces con querySelector alcanza sino quieres usar ni id ni class

Ahora respecto al comportamiento que estás obteniendo

  • Te carga el texto sin dar click por que en la línea donde haces innerHTML inmediatamente le cargas a la variable p el texto de la función entonces ya para cuando llega a la línea del listener esa acción que planeas ya fue realizada.

Considera tener tu código así:

  • Recuperas el párrafo
  • Le asignas un listener en el evento click al párrafo
  • Dentro de la función recuperas de nuevo a la variable parrafo y con innerText la igualas al texto que deseas se muestre

    <body>
     <p >hola</p>  
    </body>
    
    <script>
    let parrafo = document.querySelector("p")
    
    parrafo.addEventListener("click", () => {
      parrafo.innerText = "greetings every body"
    })
    </script>

1
  • 1
    Hwaw...cada ves se pone más interesante, ya la tengo clara. Les agradezco mucho colegas. 👍 Commented el 7 may. 2020 a las 0:43
1

Mira bien esta parte del código:

let saludos=()=> {return "greetings every body";}
p.innerHTML=saludos();

Tu mismo estas ejecutando la funcion saludos:

p.innerHTML=saludos();

Solucion? quitar esa linea de tu código y tambien modificar la funcion saludos:

<body>
 <p >hola</p>  
</body>

<script>
let p=document.getElementsByTagName("p")[0];
let saludos=()=> {p.innerHTML = "greetings every body";}
p.addEventListener("click",saludos);
</script>

1
  • Hwaw... no se porque no se me ocurrió antes. eso me pasa por no haverme familiarizado con Ema desde un principio. Muchas gracias👍 Commented el 7 may. 2020 a las 0: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.