1

Estoy haciendo una práctica muy sencilla para un login, y no encuentro el error que causa que el event listener me dé null. Probé de diferentes maneras, pero me sigue dando error. Les dejo aquí mi código SCRIPT:

    <script>
const form = document.getElementById("formulario");

const enviarFormulario = (event) => {
event.preventDefault();
const {name, userid, password} = event.target;
console.log(name.value, userid.value, password.value);
}

form.addEventListener("submit", enviarFormulario);
</script>   

y el HTML:

<main>
<section style="margin: 10%;">
<form id="formulario">
<div class="form-group" action="">
    <input name="userid" type="email" placeholder="Email" required style="width: 30%; height: 5%;">
</div>
<div class="form-group">
    <input name="password" type="text" placeholder="Password" required style="width: 30%; height: 5%;">
</div>

<button type="submit" style="width: 30%; height: 5%;"> Acceder </button>
</form> 
</section>
</main>

¿Encuentran el error?

8
  • El <script> debe ir antes de cerrar el <body>...
    – padaleiana
    Commented el 9 feb. 2023 a las 14:06
  • Tu id aún no existe en el DOM cuando tratás de asignarle el escuchador del evento. Te recomiendo que leas acerca del evento DOMContentLoaded.
    – padaleiana
    Commented el 9 feb. 2023 a las 14:07
  • No creo que este sea el error... no veo que usas a name en el DOM, por lo tanto, name y name.value estarían demás, dan undefined... Commented el 9 feb. 2023 a las 14:09
  • El código funciona perfecto, el script debería funcionar aunque lo pongas incluso fuera del body o incluso fuera de <html>, aunque lo recomendable es agregarlo o en otro archivo o antes de cerrar el body. Por otro lado no hay un input para name por lo que name da undefined en el console.log. Quizás puedas subir el código completo para probar, o puede que tengas otro eventListener que esté intentando escuchar sobre algo que esté mal definido, es lo que te está marcando el error... No podés escuchar el evento de algo undefined. Commented el 9 feb. 2023 a las 15:28
  • Trasladé el script a una sheet diferente y ahora tengo un error diferente: Uncaught ReferenceError: documen is not defined Commented el 9 feb. 2023 a las 15:28

1 respuesta 1

1

Compañeros, muchas gracias por todos sus mensajes. Finalmente logré resolver el problema como les comparto aquí abajo. Les dejo el SCRIPT:

const formulario = document.getElementById("formulario");

const enviarFormulario = (event) => {
event.preventDefault();

const { userid, password } = event.target;
console.log(userid.value, password.value);

}

formulario.addEventListener("submit", enviarFormulario);

Y el HTML:

    <html>
<body>
<section style="margin: 10%;">
<form id="formulario">
<div>
    <input name="userid" id="userid" type="email" placeholder="Email" required style="width: 30%; height: 5%;">
</div>
<div class="form-group">
    <input name="password" id="password" type="text" placeholder="Password" required style="width: 30%; height: 5%;">
</div>

<button id="button" type="submit" style="width: 30%; height: 5%;"> Acceder </button>
</form> 
</section>
<script src="main.js"></script>
</body>
</html>

Saludos!

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.