Javascript計算で小数点を含む変数

Question

身長と体重の変数からBMIを計算するこの簡単なフォームを作成しました。 HeightとWeight変数にそれぞれ整数を挿入すると機能しますが、残念ながら10進数を挿入するときのように動作しません。

この問題の修正に関するご意見はありますか？

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>

Answer 1

あなたは最終的な値を計算する際parseInt(value)を使用する必要はありません。 parseIntは、渡すことができる浮動小数点数を切り捨てます。

代わりにNumber(value)を使用できます。浮動小数点数を解析します。しかし、無効な文字を入力するとNaNが返されます。

Numberの入力タイプを入力を有効な数値に制限する際に使用できます。 （サポートされているブラウザ上）

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>