Why does the code return Nan Hi BMI calculation?

Asked

Viewed 194 times

-2

I don’t know what’s going on, but what happens is it returns "Nan". The code is supposed to be a simple BMI calculation.

It supposedly takes the input values of a form and performs the operations. If necessary, the HTML.

var peso = parseDouble(document.getElementById('inPeso'));
var altura = parseDouble(document.getElementById('inAlt'));
var aux = 0, c = 0;


function calcImc(){
    aux = altura * altura;
    c = peso/aux;
    alert("O IMC é " + c);
}
<!DOCTYPE html>
<html>
    <head>
        <title> IMC</title>
        <meta carset = "utf-8"/>
        <link rel="stylesheet" type="text/css" href="imc.css"/>
        <link rel="shortcut icon" type="image/x-icon" href="6551sans.ico"/>
        <script type="text/javascript" src="IMC.js"></script>
    </head>
    <body>
        <h1>Calcule seu IMC</h1>
        <form method="GET" id="formulario">
            <label>Peso</label>
            <input id ="inPeso" type="text" placeholder="Insira seu peso" size="20" maxlength="5">
            <label>Altura</label>
            <input id ="inAlt" type="text" placeholder="Insira sua altura (Ex.: 1.7)" size="25" maxlength="5">
            <label>Sexo</label>
            <input type="radio" class="inSexo" name="sexo" value ="m">
            <label>Masculino</label>
            <input type="radio" class="inSexo" name="sexo" value ="f">
            <label>Feminino</label>
            <button type="submit" accesskey="e" onclick="calcImc();">Calcular</button>
        </form>
    </body>
</html>

javascript html form

2 answers

5

There are some problems with the code. First is declaring and initiating the variables outside the function, this makes no sense, besides being bad to maintain global scope ends up running at inadequacy moment where there are no values to catch. Then you’re not taking the value contained in the element, you’re taking the element as a whole, you have to take the value with the property value, and then you don’t even have to convert (and if you had, parseDouble() does not exist). I took advantage and simplified the code. Take the test.

function calcImc() {
    var peso = document.getElementById('inPeso').value;
    var altura = document.getElementById('inAlt').value;
    alert("O IMC é " + (peso / (altura * altura)));
}
<!DOCTYPE html>
<html>
    <head>
        <title> IMC</title>
        <meta carset = "utf-8"/>
        <link rel="stylesheet" type="text/css" href="imc.css"/>
        <link rel="shortcut icon" type="image/x-icon" href="6551sans.ico"/>
        <script type="text/javascript" src="IMC.js"></script>
    </head>
    <body>
        <h1>Calcule seu IMC</h1>
        <form method="GET" id="formulario">
            <label>Peso</label>
            <input id ="inPeso" type="text" placeholder="Insira seu peso" size="20" maxlength="5">
            <label>Altura</label>
            <input id ="inAlt" type="text" placeholder="Insira sua altura (Ex.: 1.7)" size="25" maxlength="5">
            <label>Sexo</label>
            <input type="radio" class="inSexo" name="sexo" value ="m">
            <label>Masculino</label>
            <input type="radio" class="inSexo" name="sexo" value ="f">
            <label>Feminino</label>
            <button type="submit" accesskey="e" onclick="calcImc();">Calcular</button>
        </form>
    </body>
</html>

I put in the Github for future reference.

1


You’re multiplying HTML elements, you must take their value.

function calcImc(){
    // adicione o .value para cada elemento selecionado conforme as linhas abaixo
    let peso = document.getElementById('inPeso').value;
    let altura = document.getElementById('inAlt').value;
    let aux = 0, c = 0;

    aux = altura * altura;
    c = peso/aux;
    alert("O IMC é " + c);
}
  • 1

    For multiplication or division, it is not necessary to convert the number. Thus, the parseFloat used is unnecessary.

Browser other questions tagged javascript html form

You are not signed in. Login or sign up in order to post.