I can not make my result appear, only NaN appears in the IMC box (HTML / JavaScript)

Navigation
0

I always get NaN in the box that should output the result, I could not get something to help me on the internet.

           Calculating 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>
    
asked by anonymous 08.04.2018 / 22:26

2 answers

0

Make a parseFloat so that it converts the string being fetched in the height field to a floating number value: 

var altura = parseFloat(document.getElementById("altura").value);
    
08.04.2018 / 22:50
0

Hello,

As much as you fill in your <input> fields with only numbers, they still accept letters and other characters, so the captured value is a string. You must use the parseFloat () function when you assign 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 period, not a comma. Ex: Height 1.88.

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

var altura = document.getElementById("altura").value;
altura = altura.replace(",", ".");
altura = parseFloat(altura);
    
09.04.2018 / 01:47
VB net how to send image q is in a user control to a form ssh - error connecting to 4linux