0

La página se trata de una calculadora de diagonales de un paralelogramo para esto se tienen dos casos Fórmulas de las diagonales

Entonces mi intención es que el usuario pueda hacer el cálculo con un solo botón.

Esta es la parte del html:

<b class="b">Diagonales de un paralelogramo</b>
    <br>
    En un paralelogramo se pueden encontrar 2 diagonales, para cada diagonal se usa una fórmula
    similar y dicha fórmula se puede trabajar con dos ángulos conociendo el ángulo <b>A</b> y 
    el ángulo <b>B</b>.
    <br><br>
    <div class="rectangulo">
        <img src="paralelo2.png" alt="La imagen no se pudo cargar">
    </div>
    <br><br>
    <label for="A">Ingrese el valor de <b>A</b>:</label>
    <input type="text" id="A">
    <br><br>
    <label for="Bgrados">Ingrese el valor de <b>B</b>:</label>
    <input type="text" id="Bgrados">
    <br><br>
    <label for="B">Ingrese el valor de <b>B</b>:</label>
    <input type="text" id="B">
    <label for="a">Ingrese el valor del lado <b>a</b>:</label>
    <input type="text" id="a">
    <br><br>
    <label for="D1"><b>Primera diagonal</b>:</label>
    <input type="text" id="D1">
    <br><br>
    <label for="D2"><b>Segunda diagonal</b>:</label>
    <input type="text" id="D2">
    <br><br>
    <button class="button" onclick="calculardiagonal()">Calcular diagonales</button>
    <br><br>

Este es el script:

function calculardiagonal(){
    let ladoa = parseFloat(document.getElementById("a").value);
    let ladob =parseFloat(document.getElementById("B").value);
    let anguloA =parseFloat(document.getElementById("A").value);
    let anguloB = parseFloat(document.getElementById("Bgrados").value);
    if(anguloB === ''){
        const suma = Math.pow(ladoa,2)+Math.pow(ladob,2);
        const multiplicacion1 = 2*(ladoa*ladob);
        const radianes = (anguloA*(2 * Math.PI))/360;
        const coseno= parseFloat(Math.cos(radianes));
        const multiplicacion2 = multiplicacion1*coseno;
        const resta = suma-multiplicacion2;
        const suma2= parseFloat(suma)+parseFloat(multiplicacion2); 
        const diagonal1 = Math.sqrt(resta).toPrecision(5); 
        const diagonal2 = Math.sqrt(suma2).toPrecision(5); 
        document.getElementById("D1").value=diagonal1;
        document.getElementById("D2").value=diagonal2;
        return false;
    }
    else{
        const suma = parseFloat(Math.pow(ladoa,2))+parseFloat(Math.pow(ladob,2));
        const multiplicacion1 = 2*(ladoa*ladob);
        const radianes = (anguloB*(2 * Math.PI))/360;
        const coseno= parseFloat(Math.cos(radianes));
        const multiplicacion2 = multiplicacion1*coseno;
        const resta = suma-multiplicacion2;
        const suma2= parseFloat(suma)+parseFloat(multiplicacion2); 
        const diagonal1 = Math.sqrt(resta).toPrecision(5); 
        const diagonal2 = Math.sqrt(suma2).toPrecision(5); 
        document.getElementById("D1").value=diagonal1;
        document.getElementById("D2").value=diagonal2;
    }
}

El problema es que al ejecutar la parte del código en la que anguloB esta vacío me escribe en los inputs NaN.

introducir la descripción de la imagen aquí

Pese a ello cuando esta lleno funciona bien introducir la descripción de la imagen aquí

2 respuestas 2

1

En la secuencia de tu programa, a la variable anguloB le asignamos el valor numérico representado por el input Bgrados.

let anguloB = parseFloat(document.getElementById("Bgrados").value);

Si este input está en blanco, esta variable tendrá el valor especial NaN (not a number), hasta aquí todo correcto.

Luego, en tu if intentas determinar si esta variable anguloB tiene una cadena vacía. Recién quedamos en que esta variable tiene un valor numérico o NaN, por lo que la comparación debiera ser:

if (isNaN(anguloB)) {

Con este pequeño cambio, se resuelve tu problema.

Luego, sugerir que seas más consistente para nombrar elementos y variables. Me parece que es mucho más legible y fácil de entender el código cuando logras esta consistencia. En particular, desaconsejo el uso de Id's o nombres de variables de una sola letra, como B, a, etc, a menos que su uso sea muy claro, solo tienden a crear confusión.

En tu caso, sugiero algo como:

function calculardiagonal(){
    let ladoa = parseFloat(document.getElementById("ladoa").value);
    let ladob =parseFloat(document.getElementById("ladob").value);
    let anguloA =parseFloat(document.getElementById("anguloA").value);
    let anguloB = parseFloat(document.getElementById("anguloB").value);
    let tdiagonal1 = document.getElementById("diagonal1");
    let tdiagonal2 = document.getElementById("diagonal2");
    let diagonal1;
    let diagonal2;
    console.log(anguloB, isNaN(anguloB));
    if(isNaN(anguloB)){
        const a2masb2 = Math.pow(ladoa,2)+Math.pow(ladob,2);
        const dosab = 2*(ladoa*ladob);
        const anguloRad = (anguloA*(2 * Math.PI))/360;
        const coseno = parseFloat(Math.cos(anguloRad));
        const dosabcos = dosab*coseno;
        diagonal1 = Math.sqrt(a2masb2 - dosabcos).toPrecision(5); 
        diagonal2 = Math.sqrt(a2masb2 + dosabcos).toPrecision(5); 
    }
    else{
        const a2masb2 = Math.pow(ladoa,2)+Math.pow(ladob,2);
        const dosab = 2*(ladoa*ladob);
        const anguloRad = (anguloB*(2 * Math.PI))/360;
        const coseno = parseFloat(Math.cos(anguloRad));
        const dosabcos = dosab*coseno;
        diagonal1 = Math.sqrt(a2masb2 + dosabcos).toPrecision(5); 
        diagonal2 = Math.sqrt(a2masb2 - dosabcos).toPrecision(5); 
    }
    tdiagonal1.value = diagonal1;
    tdiagonal2.value = diagonal2;
}
label {
  width: 140px;
  display: inline flex;
}
<b class="b">Diagonales de un paralelogramo</b><br>
En un paralelogramo se pueden encontrar 2 diagonales, para cada diagonal se usa una fórmula
similar y dicha fórmula se puede trabajar con dos ángulos conociendo el ángulo <b>A</b> y 
el ángulo <b>B</b>.<br><br>
<label for="anguloA">Ángulo A:</label>
<input type="text" id="anguloA">
<br>
<label for="anguloB">Ángulo B:</label>
<input type="text" id="anguloB">
<br>
<label for="ladoa">Lado a:</label>
<input type="text" id="ladoa">
<br>
<label for="ladob">Lado b:</label>
<input type="text" id="ladob">
<br>
<label for="diagonal1"><b>Primera diagonal</b>:</label>
<input type="text" id="diagonal1" readonly>
<br>
<label for="diagonal2"><b>Segunda diagonal</b>:</label>
<input type="text" id="diagonal2" readonly>
<br><br>
<button class="button" onclick="calculardiagonal()">Calcular diagonales</button>
<br><br>

1
  • 1
    ¡Muchas gracias por tu tiempo y la explicación! Estoy comenzando a aprender sobre esto y la verdad tu explicación me ha ayudado mucho a comprender como funcionan algunos conceptos. Tratare de mejorar al nombrar variables como dices si es bastante confuso al momento de crear las funciones y tiendo a confundirme bastante. Commented el 12 jun. a las 3:17
1
  1. Un input vació, retorna un string vacio

console.log("--->", unInput.value,"<---");
<input id="unInput">

  1. Al ingresar como argumento "vacio" a unparseInt, este retorna NaN

console.log(parseInt(''));

  1. Cualquier operación que realices con NaN, será tambien NaN

console.log( 0 + NaN )
console.log( 0 * NaN )
console.log( Math.pow(NaN,2))
console.log( Math.cos(NaN) )

  1. Según tu algoritmo, si cualquier de tus inputs A y/o b están vacios, estos darán NaN y como en tu condicional (tanto si entra al if como al else), estas operando con estos valores, darán siempre un NaN como resultado final

introducir la descripción de la imagen aquí

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.