Question

更新：问题是由HTML中的按钮引起的，它是一个类型提交，它应该是类型按钮。类型提交正在重置进程，因此所有变量在被推入数组之前都被设置为0

我之前提出了另一个问题，关于如何为用户注册表单选择已检查无线电输入的值。然而，这个问题已经解决，它提出了一个新问题。

似乎我的代码没有将任何内容保存到新的用户数组中，这里是代码

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Registro</title>
  </head>
  <body>
    <form>

       <label for="txtIdentificacion">Identifación</label>
       <input type="text" placeholder="Número de identificación" id="txtIdentificacion" required>

       <label for="txtPrimerNombre">Primer Nombre</label>
       <input type="text" placeholder="Primer Nombre" id="txtPrimerNombre"  required>

       <label for="txtSegundoNombre">Segundo Nombre</label>
       <input type="text" placeholder="Segundo Nombre" id="txtSegundoNombre">

       <label for="txtPrimerApellido">Primer Apellido</label>
       <input type="text" placeholder="Primer Apellido" id="txtPrimerApellido"  required>

       <label for="txtSegundoApellido">Segundo Apellido</label>
       <input type="text" placeholder="Segundo Apellido" id="txtSegundoApellido" >

       <label for="txtNacionalidad">Nacionalidad</label>
       <input type="text" placeholder="Nacionalidad" id="txtNacionalidad"  required>

       <label for="txtTipoIdentificacion">Tipo de Identificacion</label>
       <input type="text" placeholder="Tipo de Identificacion" id="txtTipoIdentificacion"  required>

       <label for="datFechaNacimiento">Fecha de nacimiento</label>
       <input type="date" id="datFechaNacimiento"  required>

       <label for="">Género:</label>

       <label for="rbtFemenino">Femenino</label>
       <input type="radio" name="rbtGenero" value="Femenino" id="rbtFemenino" required >

       <label for="rbtMasculino">Masculino</label>
       <input type="radio" name="rbtGenero" value="Masculino" id="rbtMasculino" required >

       <label for="rbtIndefinido">Indefinido</label>
       <input type="radio" name="rbtGenero" value="Indefinido" id="rbtIndefinido" required>

       <label for="numNumeroTelefonico">Número Telefonico </label>
       <input type="number" placeholder="Sin guiones" id="numNumeroTelefonico"  required>

       <label for="txtNombreUsuario">Nombre de usuario</label>
       <input type="text" placeholder="Nombre de usuario" id="txtNombreUsuario"  required>

       <label for="txtPassword">Contraseña</label>
       <input type="password" placeholder="Contraseña" id="txtPassword"  required>

       <label for="rbtTipoUsuario">Soy un instructor</label>
       <input type="radio" name="rbtTipoUsuario" value="Instructor" id="rbtInstructor">

       <label for="rbtTipoUsuario">Soy un cliente</label>
       <input type="radio" name="rbtTipoUsuario" value="Cliente" id="rbtCliente">

       <label for="numEmergencia">Número de emergencia</label>
       <input type="number" placeholder="Sin guiones" id="numEmergencia"  required>


       <button type="submit" class="btnRegistrar" id="btnRegistrar">Registrar</button>

</form>
<script src="js/logicaNegociosRegistro.js"></script>
<script src="js/logicaInterfazRegistro.js"></script>


  </body>
</html>

JS

document.querySelector('#btnRegistrar').addEventListener('click', registrarNuevoUsuario);



function registrarNuevoUsuario() {
    var aNuevoUsuario = [];
    var sIdentificacion = '';
    var sPrimerNombre = '';
    var sSegundoNombre = '';
    var sPrimerApellido = '';
    var sSegundoApellido = '';
    var sNacionalidad ='';
    var sTipoIdentificacion = '';
    var sFechaNacimiento = '';
    var sGenero = '';
    var nNumeroTelefonico = 0;
    var sNombreUsuario = '';
    var sPassword = '';
    var nEdad = 0;
    var sTipoUsuario = '';
    var nEmergencia = '';

    sIdentificacion = document.querySelector('#txtIdentificacion').value;
    sPrimerNombre = document.querySelector('#txtPrimerNombre').value;
    sSegundoNombre = document.querySelector('#txtSegundoNombre').value;
    sPrimerApellido = document.querySelector('#txtPrimerApellido').value;
    sSegundoApellido = document.querySelector('#txtSegundoApellido').value;
    sNacionalidad = document.querySelector('#txtNacionalidad').value;
    sTipoIdentificacion = document.querySelector('#txtTipoIdentificacion').value;
    sFechaNacimiento = document.querySelector('#datFechaNacimiento').value;
    sGenero = document.querySelector('input[name="rbtGenero"]:checked') ? document.querySelector('input[name="rbtGenero"]:checked').value : '';
    nNumeroTelefonico = document.querySelector('#numNumeroTelefonico').value;
    sNombreUsuario = document.querySelector('#txtNombreUsuario').value;
    sPassword = document.querySelector('#txtPassword').value;
    nEdad = calcularEdad();
    sTipoUsuario = document.querySelector('input[name="rbtTipoUsuario"]:checked') ? document.querySelector('input[name="rbtUserTipoUsuario"]:checked').value: '';
    nEmergencia = document.querySelector('#numEmergencia').value;

    aNuevoUsuario.push(sIdentificacion, sPrimerNombre, sSegundoNombre, sPrimerApellido, sSegundoApellido, sNacionalidad, sTipoIdentificacion, sFechaNacimiento, sGenero, nNumeroTelefonico, sNombreUsuario, sPassword, nEdad, sTipoUsuario, nEmergencia );

    console.log(aNuevoUsuario);

}






function calcularEdad() {

  var fechaHoy = new Date();
  var fechaNacimiento = new Date(document.querySelector("#datFechaNacimiento").value);
  var edad = fechaHoy.getFullYear() - fechaNacimiento.getFullYear();
  var meses = fechaHoy.getMonth() - fechaNacimiento.getMonth();
  if (meses < 0 || (meses === 0 && fechaHoy.getDate() < fechaNacimiento.getDate())){
    edad--;
  }

}

按下注册按钮后，我得到控制台日志的结果，但是，它显示所有字段为“”（或者在nEdad变量的情况下未定义），长度为15。

因此，由于它实际上获得了正确的长度，因此推送本身正在工作，但它似乎没有获得任何更新的值。

起初，我认为问题可能是nEdad变量，但我通过评论将其禁用，问题仍然存在。

浏览器的控制台本身没有显示任何错误

有关正在发生的事情的任何想法？

Answer 1

nEdad显示未定义，因为calcularEdad（）函数没有返回任何内容。

在向表单标记添加一个属性后，我得到了带有非空值的正确输出。

Answer 2

你应该在函数外部声明数组，当调用函数时，数组被重新赋值

功能不将数据注册到数组中

2 个答案: