0

En este código, existe una función para escuchar un evento click y disparar una función para mostrar por consola su resultado pero lo que arroja es NaN, aún parseando los datos... no encuentro el por qué...

let Nombre = document.getElementById("nombre").value
let Numero = document.getElementById("numero").value
let Direccion = document.getElementById("direccion").value
class Persona{
    constructor(nombre, numero, direccion) {
        this.nombre = nombre;
        this.numero   = numero;
        this.direccion  = direccion;
    }
}
let persona1 = new Persona(Nombre, Numero, Direccion);
const nombres = [];
nombres.push(Nombre);
const edades = [];
edades.push(Numero);
const direcciones = [];
direcciones.push(Direccion);

//Sistema
let Cantidad = parseInt(document.getElementById("cantidad").value)
let Cuotas = parseInt(document.getElementById("cuotas").value)
function CostoCuotas(cantidad, cuotas){
    return cantidad / cuotas * 1.2
}
let boton = document.getElementById("btn")
      boton.addEventListener("click", respuestaClick)
      function respuestaClick(){
        console.log(persona1)
        console.log(CostoCuotas(Cantidad, Cuotas))
    




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Calcula tu prestamo Online</title>
</head>
<body>
    <h1>Bienvenido a nuestra pagina</h1>
    <h2>Ingresa tus datos para calcular el precio de tus cuotas</h2>
    <div class="contenedor">
        <form id="Formulario" action="">
            <input type="text" id="nombre" name="Nombre" placeholder="Ingrese su nomre completo">
            <input type="text" id="numero" name="Numero" placeholder="Ingrese su numero telefonico">
            <input type="text" id="direccion" name="Direccion" placeholder="Ingrese su direccion">
            <input type="number" id="cantidad" name="Cantidad" placeholder="Cantidad que desea acreditar">
            <select name="cuotas" id="cuotas">
                <option value="3">3</option>
                <option value="6">6</option>
                <option value="12">12</option>
                <option value="24">24</option>
            </select>
            <button id="btn" type="button" placeholder="Calcular">Enviar </button>
        </form>
    </div>
    <script src="js/miarchivo.js"></script>
</body>
</html>

1 respuesta 1

3

Te sale NaN porque estas obteniendo los datos Cantidad y Cuotas cuando carga el documento, por lo que los valores son vacios, por lo menos Cantidad, tambien estas creando una inscancia de Persona de la misma manera, obtienes los valores cuando carga el documento, por lo que Persona queda con valores vacios,lo unico que tienes que cambiar es pasar esas asignaciones dentro del evento click, en tu funcion respuestaClick():

const nombres = [];  const direcciones = [];   const edades = [];             
        let boton = document.getElementById("btn")
        boton.addEventListener("click", respuestaClick)

    function respuestaClick(){
        let Nombre = document.getElementById("nombre").value
        let Numero = document.getElementById("numero").value
        let Direccion = document.getElementById("direccion").value
        let persona1 = new Persona(Nombre, Numero, Direccion);

        let Cantidad = parseInt(document.getElementById("cantidad").value)
        let Cuotas = parseInt(document.getElementById("cuotas").value)

        nombres.push(Nombre);
        edades.push(Numero);
        direcciones.push(Direccion);

        console.log(persona1)
        console.log(CostoCuotas(Cantidad, Cuotas))
    }

    function CostoCuotas(cantidad, cuotas){
        return cantidad / cuotas * 1.2
    }

    class Persona{
        constructor(nombre, numero, direccion) {
            this.nombre = nombre;
            this.numero   = numero;
            this.direccion  = direccion;
        }
    }

Fiddle:

const nombres = [];  const direcciones = [];   const edades = [];             
        let boton = document.getElementById("btn")
        boton.addEventListener("click", respuestaClick)

        function respuestaClick(){
            let Nombre = document.getElementById("nombre").value
            let Numero = document.getElementById("numero").value
            let Direccion = document.getElementById("direccion").value
            let persona1 = new Persona(Nombre, Numero, Direccion);

            let Cantidad = parseInt(document.getElementById("cantidad").value)
            let Cuotas = parseInt(document.getElementById("cuotas").value)

            nombres.push(Nombre);
            edades.push(Numero);
            direcciones.push(Direccion);

            console.log(persona1)
            console.log(CostoCuotas(Cantidad, Cuotas))
        }

        function CostoCuotas(cantidad, cuotas){
            return cantidad / cuotas * 1.2
        }

        class Persona{
            constructor(nombre, numero, direccion) {
                this.nombre = nombre;
                this.numero   = numero;
                this.direccion  = direccion;
            }
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Calcula tu prestamo Online</title>
</head>
<body>
    <h1>Bienvenido a nuestra pagina</h1>
    <h2>Ingresa tus datos para calcular el precio de tus cuotas</h2>
    <div class="contenedor">
        <form id="Formulario" action="">
            <input type="text" id="nombre" name="Nombre" placeholder="Ingrese su nomre completo">
            <input type="text" id="numero" name="Numero" placeholder="Ingrese su numero telefonico">
            <input type="text" id="direccion" name="Direccion" placeholder="Ingrese su direccion">
            <input type="number" id="cantidad" name="Cantidad" placeholder="Cantidad que desea acreditar">
            <select name="cuotas" id="cuotas">
                <option value="3">3</option>
                <option value="6">6</option>
                <option value="12">12</option>
                <option value="24">24</option>
            </select>
            <button id="btn" type="button" placeholder="Calcular">Enviar </button>
        </form>
    </div>
</body>
</html>

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.