0

mi problema consta en que tengo que imprimir los datos de un formulario HTML y javascript en un <h1> pero con el input date tengo que pasarlo a la edad que tenga el usuario según los datos que introdujo, mi duda es como enviar todos los datos al <h1> y transformar los datos introducidos en date a la edad que el usuario aya introducido.

Usando las funciones While y if.

mi código HTML es:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="work js/form.js"></script>
    <title>formulario</title>
    <link href="rcss/" rel="stylesheet" type="text/css">

</head>
<body>
    <div id="contenedor">
        <div id="cabeza">
        <form action="" id="formulario">
        <p id="boton">
        <label id="engreso"for="">ingrese sus datos</label>
        </p>
        <p id="nombre">
        <input type="text" name="nombre" placeholder="Nombre" class="sendit">
        </p>
        <p id="apellido">
        <input type="text" name="apellido" placeholder="Apellido" class="sendit">
        </p> 

        <p id="fecha">
            <input type="date" name="fecha" class="sendit">

        </p> 

        <p id="email">
            <input type="email" name="email" placeholder="[email protected]" class="sendit">

        </p>    

        <input type="submit" value="enviar" name="boton" onclick="send()">

    </form>
    </div>    
     <div id="cuerpo">
    <h1 id="yax">Cuales son sus datos</h1>
    <h1 id="nom">Su nombre</h1>
    <h1 id="yax">Cual es su apellido</h1>
    <h1 id="ape">su apellido</h1>
    <h1 id="yax">Cual es su edad</h1>
    <h1 id="eda">su edad</h1>
    <h1 id="yax">Cual es su correo</h1>
    <h1 id="eda">su email</h1>
</div>
</div>
</body>
</html>

y lo que tengo en el código javascript es:

function send(){
  var formulario = document.getElementById('formulario')[0];
  var elementos = formulario.elements;

  x=0;
  var fechas = document.getElementsByName('fecha')
  while( x < formulario){





    x++

  }

}

en resumen lo que tiene que hacer la función es que mediante lo que el usuario introduzca en input date lo convierta a su edad y imprimir los otros datos como nombre, apellido, etc, en un <h1> muchas gracias por su tiempo.

1 respuesta 1

1

Lo que tienes que hacer es crear una función que se encargue de procesar la fecha del input para después calcular la edad.

Después al h1 con el id="eda" le asignamos que innerHTML sea igual a la edad.

Para que esto función es necesario que se le agregue un evento change al input date para cuando este cambie corra dicha función que lleva como parámetro el elemento onchange="edad(event)".

function edad(e) {
  edadMS = Date.parse(Date()) - Date.parse(e.target.value);
  edads = new Date();
  edads.setTime(edadMS);
  resultado = edads.getFullYear() - 1970;
  res = (resultado <= 0) ? 0 : resultado; // Para evitar que sea negativo
  document.getElementById('eda').innerHTML = res;
}
<div id="contenedor">
    <div id="cabeza">
        <form action="" id="formulario">
            <p id="fecha">
                <input type="date" onchange="edad(event);" name="fecha" class="sendit">
            </p>
        </form>
    </div>
    <div id="cuerpo">
        <h1 id="yax">Cual es su edad</h1>
        <h1 id="eda">su edad</h1>
    </div>
</div>

2
  • como lo pudiese activar luego de clickear un botón? el 10 abr. 2020 a las 4:39
  • Tendrías que quitar el onchange en input date y poner onclick en el botón, pero en lugar de mandar el evento dentro de la función lo mandarías vacío. En la función en lugar de usar e.target.value, usaras document.getElementByID('iddelinputdate').value. el 10 abr. 2020 a las 6:06

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.