I cannot make my result appear, only Nan appears in the IMC box.(HTML/Javascript)

Asked

Viewed 348 times

1

Nan always appears in the box that should come out the result, I could not get something to help me on the internet.

Calculation of BMI ! 

  <script>
      calcularIMC = function (){
        var peso = document.getElementById("peso").value;    
        var altura = document.getElementById("altura").value;    
        var imc = (peso/Math.pow(altura,2));
        document.getElementById("imc1").value = eval(imc);
       } 
      </script>
</head>
<body>
    <form class="form-horizontal">
        <fieldset>

        <!-- Form Name -->
       <center><legend>Caculadora de IMC</legend></center>

        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" for = "altura">Altura</label>  
          <div class="col-md-4">
          <input id="altura" name = "altura" 
                type="text" 
                placeholder="#,## m"
                class="form-control input-md">

          </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" for = "peso">Peso</label>  
             <div class="col-md-4">
                <input id="peso" 
                     name="peso" 
                     type="text"
                     placeholder="###,## kg"
                     class="form-control input-md">

          </div>
        </div>
        <!-- Button -->
        <div class="form-group">
             <label class="col-md-4 control-label" for=""></label>
                 <div class="col-md-4">
                     <type = "button" class="btn btn-primary" 
                         id = "resultadoIMC" 
                         onclick = "calcularIMC()">Calcular IMC</button>
                   </div>
           </div>

        <!-- Text input-->
        <div class="form-group">
             <label class="col-md-4 control-label" for="imc">IMC</label> 
                 <div class="col-md-4">
                     <input id="imc1" 
                     type = "text"
                     class="form-control input-md"><br>
                </div>
        </div><br>            
        </fieldset>
        </form>

    </body>
    </html>
javascript

2 answers

0


Make a parseFloat to convert the string being captured in the height field to a floating number value:

var altura = parseFloat(document.getElementById("altura").value);

  • Thanks, buddy, something silly that never even crossed my mind !

0

Hello,

As much as you fill in your fields <input> with only numbers, they still accept letters and other characters, so the captured value is a string. You should use the parseFloat() function when assigning these values to variables. See:

calcularIMC = function (){
    var peso = parseFloat(document.getElementById("peso").value);    
    var altura = parseFloat(document.getElementById("altura").value);
    var imc = (peso/(Math.pow(altura,2)));
    document.getElementById("imc1").value = eval(imc);
}

In addition, for javascript to capture the float correctly, the number must contain a dot, not a comma. Ex: Height 1.88.

To treat this you can use the replace() method. This way:

var altura = document.getElementById("altura").value;
altura = altura.replace(",", ".");
altura = parseFloat(altura);

Browser other questions tagged javascript

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