Variablen mit Dezimalstellen bei Javascript-Berechnungen

Question

Ich habe diese einfache Form erstellt, die den BMI aus Höhen- und Gewichtsvariablen berechnet. Es funktioniert, wenn ich Ganzzahlen in die Variablen Height und Weight einfüge, aber leider funktioniert es nicht so, wie es sein sollte, wenn ich Dezimalzahlen einfüge.

Irgendwelche Gedanken zur Behebung dieses Problems?

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

Sie brauchen nicht parseInt(value) zu verwenden, wenn die endgültigen Werte zu berechnen. parseInt wird alle Floats abrunden, die Sie übergeben können.

Sie können stattdessen Number(value) verwenden. Welches wird schwimmt. Aber dies wird NaN zurückgeben, wenn Sie ungültige Zeichen eingeben.

Sie können den Eingangstyp Number verwenden, um die Eingänge auf gültige Zahlen zu beschränken. (Auf unterstützten Browsern)

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>