1

No me muestra por la consola los valores de ingreso, solo me muestra el DOM cargado y el evento submit capturado, les agradezco si lo pueden solucionar.

'use strict'

window.addEventListener("load", function () {
  console.log("Dom cargado");
  var formulario = document.getElementById("formulario");

  formulario.addEventListener("submit", function () {
    console.log("evento submit capturado");
  });
  var nombre = document.querySelector("#nombre").value;
  var apellidos = document.querySelector("#apellidos").value;
  var edad = document.querySelector("#edad").value;
  console.log(nombre, apellidos, edad);
});
<!DOCTYPE HTML>
<html lang="es">
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript" src="js/32-ejercicio-dom.js"></script>
        <title>Ejercicio DOM-Eventos y Funciones</title>
    </head>
    <body>
        <h1>Ejercicio DOM-Eventos y Funciones</h1>
        <form action="" method="post" id="formulario" onsubmit="return false;">
            <label for="nombre" >Nombre</label><br>
            <input type="text" name="nombre" id="nombre"><br>

            <label for="apellidos" >Apellidos</label><br>
            <input type="text" name="apellidos" id="apellidos"><br>
            
            <label for="edad" >Edad</label><br>
            <input type="number" name="edad" id="edad"><br>

            <input type="submit" value="enviar" id="submit" >
        </form>
    </body>
</html>

2
  • 2
    Podrías agregar tu html?
    – NSMichelJ
    Commented el 20 feb. 2023 a las 23:58
  • @NSMichelJ si ya lo pongo Commented el 21 feb. 2023 a las 1:18

1 respuesta 1

1

Resulta que cuando haces submit, solo estás mostrando este console.log():

formulario.addEventListener("submit", function () {
  console.log("evento submit capturado");
});

Y tus variables, como están fuera, se muestran vacías porque al cargar la página, se ejecuta el listener load, mostrando los valores del input vacíos porque aún no los rellenaste:

// al cargar la página, ejecuto el listener...
window.addEventListener("load", function () {
  // muestra este mensaje...
  console.log("Dom cargado");
  var formulario = document.getElementById("formulario");

  // esto solo se ejecuta cuando haces "submit" a tu formulario.
  formulario.addEventListener("submit", function () {
    console.log("evento submit capturado");
  });

  // luego caputra a tus valores...
  var nombre = document.querySelector("#nombre").value;
  var apellidos = document.querySelector("#apellidos").value;
  var edad = document.querySelector("#edad").value;
  // y tus valores salen vacíos porque al haber cargado la página, nunca haz rellenado los inputs
  console.log(nombre, apellidos, edad);
});

La solución sería capturar a los valores de tus inputs cuando hagas el submit, así capturará al valor que digitaste antes de que hagas el submit:

formulario.addEventListener("submit", function () {
  console.log("evento submit capturado");
  var nombre = document.querySelector("#nombre").value;
  var apellidos = document.querySelector("#apellidos").value;
  var edad = document.querySelector("#edad").value;
  console.log(nombre, apellidos, edad);
});

Código:

window.addEventListener("load", function () {
  console.log("Dom cargado");
  var formulario = document.getElementById("formulario");

  formulario.addEventListener("submit", function () {
    console.log("evento submit capturado");
    var nombre = document.querySelector("#nombre").value;
    var apellidos = document.querySelector("#apellidos").value;
    var edad = document.querySelector("#edad").value;
    console.log(nombre, apellidos, edad);
  });
});
<h1>Ejercicio DOM-Eventos y Funciones</h1>
<form action="" method="post" id="formulario" onsubmit="return false;">
  <label for="nombre" >Nombre</label><br>
  <input type="text" name="nombre" id="nombre"><br><br>

  <label for="apellidos" >Apellidos</label><br>
  <input type="text" name="apellidos" id="apellidos"><br><br>

  <label for="edad" >Edad</label><br>
  <input type="number" name="edad" id="edad"><br><br>

  <input type="submit" value="enviar" id="submit" >
</form>

1
  • entiendo mmmm.. muchisimas gracias, seguiré practicando y aprendiendo Commented el 21 feb. 2023 a las 1:40

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.