以公制四舍五入 JavaScript BMI 计算器的结果编号

Question

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!

Answer 1

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.round line 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

Answer 2

I don't know about the formula you use to compute the BMI (and it does not count very much, it can be fixed easily anytime) but I can see a lot of things that can make the code easier to read, understand and reuse (or just make it cleaner).

Your code fail miserably and tell that the persons having BMI equal to 18.5 or between 24.9 and 25 are "obese" because of the way you check the value of variable BMI against the range intervals.
If BMI is not < 18.5 (the first if statement) then it automatically is >= 18.5 (there isn't other way); there is no need to check it against > 18.5 . Also, if the second if condition does not match it means that BMI >= 24.9 and your third check ignores the values between (and including) 24.9 and 25.0 ( 24.95 , for example).

When you have to check a value against some interval limits compare it only against one boundary of each interval:

if (BMI < 18.5) {
  ...
} else if (BMI < 24.9) {           // 18.5 <= BMI because we are on the `else` branch
  ...
} else if (BMI < 29.9) {           // 24.9 <= BMI because on the `else` of the second `if`
  ...
} else {                           // 29.9 <= BMI
  ...
}

---

The function calculateFunction() uses some global variables ( heightInput , weightInput , result , statement ) and that makes difficult to assert what values it uses to do its computation. Also, it changes the document and this is also not visible when you check the place where the function is used.

Also, the name of the function does not describe what it does. The word "function" in a function name is useless, it does not tell anything; try to avoid using it. A better name for the function is calculateBMI() .

Let the function do only the computation of the BMI and return it. You can move the code that interacts with the document (gets values from inputs, puts the BMI into another field) into a separate function:

// The function that computes the BMI
function calculateBMI(height, weight) {
  // implement the correct formula to compute the BMI
  return weight / Math.pow(height, 2);
}

// The function that computes the description and the color
function getBMIDescription(BMI) {
  // depending on the BMI value compute the text and the color
  if (BMI < 18.5) {
    return { description: 'Underweight', color: 'yellow' };
  } else if (BMI < 24.9) {
    return { description: 'Normal weight', color: 'green' };
  } else if (BMI < 29.9) {
    return { description: 'Overweight', color: 'yellow' };
  } else {
    return { description: 'Obesity', color: 'red' };
  }
}

// The function that interacts with the document
function computeBMIandDisplay(doc) {
  // `doc` is the page document but we pass it as argument to make the things more clear

  // gather the input data
  let height = doc.querySelector('.height-input-field').value;
  let weight = doc.querySelector('.weight-input-field').value;

  // compute the BMI and find the associated description and color
  let BMI = calculateBMI(height, weight);
  let { description, color } = getBMIDescription(BMI);

  // put the values on screen
  // display the BMI with two decimals
  doc.querySelector('.result').innerText = BMI.toFixed(2);

  // display the description and the associated color
  doc.querySelector('.result-statement').innerText = description;
  doc.getElementById('result-color').style.backgroundColor = color;
}


// Install the click handler on the button
document.querySelector('.calculate').addEventListener('click', () => computeBMIandDisplay(document));

Answer 3

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

Answer 4

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/