Variables with decimals on Javascript calculations

Question

I' ve made this simple form which calculates the BMI from Height and Weight Variables. It works when i insert integers to Height and Weight variables respectively, but unfortunately it doesn't work the way it should when i insert decimal numbers.

Any thoughts on fixing this issue?

function Calculate() {
  var manWeight = document.getElementById('manWeight').value;
  var manHeight = document.getElementById('manHeight').value;

  document.getElementById('manBMI').value = parseInt(document.getElementById('manWeight').value) / Math.pow(parseInt(document.getElementById('manHeight').value), 2);
  
}

<label for="manWeight">Weight: *</label>
  <input type="text" name="manWeight" size="35" id="manWeight" required autocomplete="off">
  <br>

<label for="manHeight">Height: *</label>
  <input type="text" name="manHeight" size="35" id="manHeight" required autocomplete="off"> <br>

<label for="manBMI">BMI:</label>
  <input type="text" name="manBMI" size="35" id="manBMI" required disabled autocomplete="off">

<button type="button" id="calculator" name="calculator" onclick="Calculate();">Calculate</button>

Cerbrus can you please explain me how am i supposed to know that the root of my problem could be found in that article? And you also downvote a fair answer. Stack Overflow is built to make our lives simpler not more complex, especially for us who are self taught developers ... — thanos_zach, Dec 08 '17 at 14:14

nipuna-g · Accepted Answer · 2017-12-08T14:14:51.160

You don't need to use parseInt(value) when calculating the final values. parseInt will round down any floats that you can pass in.

You can instead use Number(value). Which will parse floats. But this will return NaN if you input invalid characters.

You can use the input type of Number in limit the inputs to valid numbers. (on supported browsers)

function Calculate() {
  var manWeight = document.getElementById('manWeight').value;
  var manHeight = document.getElementById('manHeight').value;

  document.getElementById('manBMI').value = Number(document.getElementById('manWeight').value) / Math.pow(Number(document.getElementById('manHeight').value), 2);
  
}

<label for="manWeight">Weight: *</label>
  <input type="number" name="manWeight" size="35" id="manWeight" required autocomplete="off">
  <br>

<label for="manHeight">Height: *</label>
  <input type="number" name="manHeight" size="35" id="manHeight" required autocomplete="off"> <br>

<label for="manBMI">BMI:</label>
  <input type="text" name="manBMI" size="35" id="manBMI" required disabled autocomplete="off">

<button type="button" id="calculator" name="calculator" onclick="Calculate();">Calculate</button>

Thanks a lot @nipuna777 ! I used the first answer of yours which worked perfectly, i'm not the one who downvoted ... — thanos_zach, Dec 08 '17 at 14:25

Variables with decimals on Javascript calculations

1 Answers1