1

Por alguna razon cuando trato de recibir la informacion de un formulario getElementById no responde, en vez de recibir datos la variable se queda en null y luego me da un error cuando uso el addEventListener, a continuacion el codigo en JS.

"use strict";

let formulario = document.getElementById('envio');//Aqui queda en null

console.log(formulario);
formulario.addEventListener('submit', function(e){
    e.preventDefault();
    console.log('Me diste un click');
});

Y aqui esta el formulario en html.

<html lang="en">
<head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Formulario</title>
</head>
<body>
        <script src="js/app.js"></script>
        <div class="Centrar">
                <form id="formulario" method="post" name="ingresar" class="formularios" style="width: 300px;">
                        <h3>Formulario</h3><br>
                        <div style="display: flex; justify-content: center;  flex-direction: column; align-items: center;">
                                <label>Nombre</label for="name"><input type="text" name="name" required style="margin: 10px; width: 150px;">
                                <label>Apellido</label for="surname"><input type="text" name="surname" required style="margin: 10px; width: 150px;">
                                <label style="position:relative;">Email</label><input type="email" name="email" required style="margin: 10px; margin-bottom: 15px; width: 150px;">
                        </div>
                        <hr>
                        <div style="position:relative; top: 10px; margin-bottom: 10px;">
                                <label style='margin-top: 15px;'>Contraseña</label><br><input type="password" name="password" required style="margin: 10px; width: 150px;"><br>
                                <label>Repetir Contraseña</label><br>
                                <input type="password" name="passwordR" required style="margin: 10px; width: 150px;"><br>
                        </div>
                        <input type="submit" value="Enviar" class='button' style='padding: 3px 10px; font-size: 12px; margin-bottom: 5px; margin-left: 5px; margin-top: 5px;'>
                </form>
        </div>
</body>
</html>

Este es el error que me da la consola:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

Algo debe estar mal con el formulario.

3
  • 1
    Hola Firiel, prueba con: window.onload = function() { coloca tu código dentro, de esa forma se ejecuta después de cargar la página, que es la razón del null". Commented el 20 jun. 2023 a las 5:03
  • ¿con cambiar al id del formulario (document.getElementById('formulario');) se soluciona? ¿Qué nuevo error tienes?... Commented el 20 jun. 2023 a las 14:43
  • Hola de nuevo, tambien puedes solucionarlo, colocando <script src="js/app.js"></script> al final del "body". Commented el 20 jun. 2023 a las 17:09

1 respuesta 1

1

Ningún elemento del HTML tiene el id envio. Cambia el id del formulario a envio o cambia

let formulario = document.getElementById('formulario');

EDIT: la etiqueta <script> deberia ir al final del body para que el script se cargue cuando ya se haya renderizado la página. Puede estar pasando que cuando haces el getElementById, el formulario todavía no se haya renderizado.

Mueve la etiqueta <script> así:

<body>
    <div class="Centrar">
    ...
    </div>
    <script src="js/app.js"></script>
</body>

Si aún así tienes problemas, prueba a poner todo el código de tu script en un evento que espera a que se cargue la página:

document.addEventListener('DOMContentLoaded', function() {
    let formulario = document.getElementById('formulario');//Aqui queda en null

    console.log(formulario);
    formulario.addEventListener('submit', function(e){
        e.preventDefault();
        console.log('Me diste un click');
    });
});
4
  • Ya lo hice, sigue haciendo lo mismo. Commented el 20 jun. 2023 a las 3:54
  • MUCHAS GRACIAS :) Commented el 20 jun. 2023 a las 22:04
  • 1
    Si esto ha resuelto tu problema, agradezco que lo marques como respuesta. Asi puede serle de utilidad a quienes lo vean en el futuro. Commented el 21 jun. 2023 a las 0:42
  • También puedes agregar el atributo defer si el script se encuentra en otro archivo para que se ejecute una vez cargado el DOM.
    – Mateo
    Commented el 2 jul. 2023 a las 19:03

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.