0

Estoy estudiando la parte de eventos en JS y bueno he estado en esta parte y no se porque mi código falla, ya que le asigno que busque el primer elemento que seria button en el html y no entiendo que dice que es null, y si la defino en la consola con el mismo código si funciona y no termino de entender por completo el funcionamiento de la funcion querySelector(). Tambien intente con clases y no funcionaba. Aqui esta mi código html:

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <p>Preuba </p>
    <button class="button">Enviar</button>

</body>
</html>



Ese es mi html y mi app es:




const button1 = document.querySelector('button');


alert(" ");
2
  • Tu botón se está alcanzando correctamente, haz esta prueba y verás: alert(button1.textContent); ¿Cuál es el problema?
    – A. Cedano
    Commented el 4 feb. 2022 a las 18:23
  • Me sigue diciendo que el valor de button1 es null
    – Joaquin
    Commented el 4 feb. 2022 a las 19:14

2 respuestas 2

5

debes ejecutar el script al final del documento justo antes de la etiqueta de cierre del body

4
  • Estan separados en dos archivos
    – Joaquin
    Commented el 4 feb. 2022 a las 19:13
  • No es a eso a lo que se refiere. El HTML se lee línea por línea de principio a fin. Cuando llega al script, todavía no ha leído el body por ende no existe el elemento. Debes poner el script después del botón. De preferencia antes de cerrar el body.
    – Mateo
    Commented el 4 feb. 2022 a las 19:20
  • Ah ya pruebo de esa manera
    – Joaquin
    Commented el 4 feb. 2022 a las 19:25
  • Muchas gracias sirvio y funciono no sabia eso pense que se ejecutaba igual en head osea que siempre es mejor colocarlo en body?
    – Joaquin
    Commented el 4 feb. 2022 a las 19:27
-1

Intenta esto:

    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        
    </head>
    <body>
        <p>Preuba </p>
        <button class="button">Enviar</button>
    
    </body>
<script type="text/javascript" src="app.js"></script>
    </html>

Introduce la declaración del script al final del body

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.