UPDATE: The issue was being caused by the button in the HTML, it was a type submit, when it should have been type button. Type submit was resetting the process so all the variables were being set to 0 before being pushed into the array
I made another question earlier about how to select the values of a checked radio input for a user register form. That issue was solved, however, it brought up a new issue.
It seems my code is not saving anything into the new user array, here's the code
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--;
}
}
Upon hitting the register button, I get the results of the console log, however, it's showing all the fields as being "" (or undefined, in the case of the nEdad variable) and the length being 15.
So, since it's actually getting the correct length, the push itself is working, but it seems that it's not getting ANY of the updated values.
At first, I thought the issue could be the nEdad variable, but I disabled it via comments and the issue persisted.
The browser's console itself is not showing any error
Any idea about what's going on?
