Round a result number for JavaScript BMI calculator in metric-CodePudding

I am a bit stuck with my beginner project. I am building a simple BMI calculator in metric and I do not understand where do I fail. I am using Math.round, but I am stuck at outputting result with rounded numbers as in the following code:

var heightInput = document.querySelector(".height-input-field");
var weightInput = document.querySelector(".weight-input-field");
var calculateButton = document.querySelector(".calculate");
var result = document.querySelector(".result");
var statement = document.querySelector(".result-statement");
var BMI, height, weight;

function calculationFunction() {
    height = heightInput.value;
    weight = weightInput.value;
    BMI = weight / Math.pow(height,2);
    result.innerText = Math.round(BMI*100)/100;

    if (BMI < 18.5) {
        statement.innerText = "Underweight";
        document.getElementById('result-color').style.backgroundColor="yellow";
    } else if ((BMI > 18.5) && (BMI < 24.9)) {
        statement.innerText = "Normal weight";
        document.getElementById('result-color').style.backgroundColor="green";
    } else if ((BMI > 25) && (BMI < 29.9)) {
        statement.innerText = "Overweight";
        document.getElementById('result-color').style.backgroundColor="yellow";
    } else {
        statement.innerText = "Obesity";
        document.getElementById('result-color').style.backgroundColor="red";
    }
}

calculateButton.addEventListener("click", calculationFunction);



/*
BMI Categories:
Underweight = <18.5
Normal weight = 18.5–24.9
Overweight = 25–29.9
Obesity = BMI of 30 or greater
*/

And I get 0 as a result: actual "app"

Would appreciate any help! Thanks!

CodePudding user response：

You are using a BMI metric formula that is meant for kg and meters, so your result is always a really small value and the Math.roundline rounds it to 0.

If you want to use cms (centimeters) then change your formula to

BMI = weight (kg) / height (cm) / height (cm) * 10000

So in code, your BMI line changes to

BMI = weight / height / height * 10000

CodePudding user response：

On row 11 where you assign variable value something is wrong. height at power 2 will be much bigger compared with weight, so the result will be lower than 1/2, rounded will be 0.

You have to correct your formula

CodePudding user response：

Alright, thanks a lot for advice. I did see my mistakes. I am answering to this as I have came to a better result as follows:

var heightInput = document.querySelector(".height-input-field");
var weightInput = document.querySelector(".weight-input-field");
var calculateButton = document.querySelector(".calculate");
var result = document.querySelector(".result");
var statement = document.querySelector(".result-statement");
var BMI, height, weight;

function calculationFunction() {
    height = heightInput.value;
    weight = weightInput.value;
    BMI = weight / height / height * 10000;
    result.innerText = Math.round(BMI*100)/100;

    if (BMI < 18.5) {
        statement.innerText = "Underweight";
        document.getElementById('result-color').style.backgroundColor="yellow";
        document.getElementById('result-color').style.color="black";
    } else if ((BMI > 18.5) && (BMI < 24.9)) {
        statement.innerText = "Normal weight";
        document.getElementById('result-color').style.backgroundColor="green";
        document.getElementById('result-color').style.color="white";
    } else if ((BMI > 25) && (BMI < 29.9)) {
        statement.innerText = "Overweight";
        document.getElementById('result-color').style.backgroundColor="yellow";
        document.getElementById('result-color').style.color="black";
    } else {
        statement.innerText = "Obesity";
        document.getElementById('result-color').style.backgroundColor="red";
        document.getElementById('result-color').style.color="white";
    }
}

calculateButton.addEventListener("click", calculationFunction);

And here is the actual https://theshadyslim.github.io/BMI-Calculator/