3

Tengo un formulario de contactos, que cuando carga el navegador me muestra el siguiente error por consola:

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

Este es mi código:

form.addEventListener("submit", (e) => { event.preventDefault(); }

const nombre = document.getElementById("myname")
const apellidos = document.getElementById("surname")
const email = document.getElementById("email")
const celular = document.getElementById("mobile")
const contraseña = document.getElementById("password")
const contraseña2 = document.getElementById("repeatpassword")
const terminosYcondiciones = document.getElementById("termsandconditions")
const form = document.getElementById("form")
const listinput = document.querySelectorAll(".form-input")

y mi HTML:

<form action="" class="form">
  <h1 class="form-titulo">Regístrate</h1>

  <div class="form-input myname">
    <input type="text" id="myname" />
    <label for="myname">Nombre</label>
    <p class="mensajeerror"></p>
  </div>

  <div class="boton-enviar">
    <input type="submit" value="Enviar" />
  </div>
  <p class="mensaje correcto">Listo !!</p>
</form>
7
  • 2
    Es porque form es null o undefined. Sería bueno ver el HTML de form y también como haces document.getElementById o document.querySelector.
    – Héctor M.
    Commented el 26 ene. 2023 a las 0:54
  • ahi agrege el codigo de js. Commented el 26 ene. 2023 a las 1:39
  • el html de form es muy largo y no se como subirlo. estoy intentando subirlo. Commented el 26 ene. 2023 a las 1:40
  • No tiene que ser el código completo, lo que quiero ver es la declaración <form id="tu id" class="tus clases"> para ver el id del formulario.
    – Héctor M.
    Commented el 26 ene. 2023 a las 1:42
  • ahí subí básicamente como lo tengo. Muchas gracias por responder. Commented el 26 ene. 2023 a las 1:46

2 respuestas 2

4

Ya veo, el error radica en lo siguiente:

En tu código de JavaScript declaras tu variable form de esta forma:

const form = document.getElementById("form")

Intentando buscar tu formulario con el id form, pero en HTML lo declaras de esta forma:

<form action="" class="form">

Donde <form> no presenta el atributo id, que debería ser de esta forma:

<form action="" id="form" class="form">

Vamos a corregir tu código:

const nombre                = document.getElementById("myname");
const apellidos             = document.getElementById("surname");
const email                 = document.getElementById("email");
const celular               = document.getElementById("mobile");
const contrasena            = document.getElementById("password");
const contrasena2           = document.getElementById("repeatpassword");
const terminosYcondiciones  = document.getElementById("termsandconditions");
const form                  = document.getElementById("form");
const listinput             = document.querySelectorAll(".form-input");

form.addEventListener("submit", (e) =>
{
    event.preventDefault();
    console.log('Formulario enviado');
});
<form action="" id="form" class="form">
  <h1 class="form-titulo">Regístrate</h1>

  <div class="form-input myname">
    <input type="text" id="myname" />
    <label for="myname">Nombre</label>
    <p class="mensajeerror"></p>
  </div>

  <div class="boton-enviar">
    <input type="submit" value="Enviar" />
  </div>
  <p class="mensaje correcto">Listo !!</p>
</form>

Ah, y por favor, intenta evitar las ñ o letras acentuadas en tu código, puede ahorrarte algunos dolores de cabeza.

1
  • 1
    jeje, justo iba a comentarle sobre esa variable, buen aporte :-) +1. Commented el 26 ene. 2023 a las 2:13
0

Por lo que veo estas agregando un tipo de evento "submit" el cual no existe, al momento de dar click en el boton del formulario, te dejare un pequeño ejemplo de un formulario utilizando el evento "click"

<form>
  <label for="name">Nombre:</label>
  <input type="text" id="name" name="name">
  <button type="submit" id="submitBtn">Enviar</button>
</form>

<script>
  var submitBtn = document.getElementById("submitBtn");
  submitBtn.addEventListener("click", function(event) {
    event.preventDefault();
    var name = document.getElementById("name").value;
    console.log("Nombre enviado: " + name);
  });
</script>

Espero resolver tu duda

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.