以公制四舍五入 JavaScript BMI 計算器的結果編號

Question

我有點堅持我的初學者項目。 我正在構建一個簡單的 BMI 公制計算器，但我不明白我在哪里失敗了。 我正在使用 Math.round，但我堅持使用四舍五入的數字輸出結果，如下代碼所示：

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
*/

結果我得到0：實際的“應用程序”

將不勝感激任何幫助！ 謝謝！

Answer 1

您正在使用適用於 kg 和米的 BMI 度量公式，因此您的結果始終是一個非常小的值，並且Math.round線將其四舍五入為 0。

如果您想使用 cms（厘米），請將您的公式更改為

BMI=體重（kg）/身高（cm）/身高（cm）*10000

因此，在代碼中，您的 BMI 行更改為

BMI = weight / height / height * 10000

Answer 2

我不知道你用來計算 BMI 的公式（它不算很多，它可以隨時輕松修復）但我可以看到很多可以使代碼更易於閱讀、理解和重用的東西（或者只是讓它更清潔）。

您的代碼慘遭失敗，並告訴 BMI 等於18.5或介於24.9和25之間的人是“肥胖” ，因為您檢查變量BMI值與范圍間隔的方式。
如果BMI不是< 18.5 （第一個if語句），那么它會自動>= 18.5 （沒有其他方法）； 沒有必要對照> 18.5檢查它。 此外，如果第二個if條件不匹配，則意味着BMI >= 24.9並且您的第三個檢查忽略（包括） 24.9和25.0 （例如24.95 ）之間的值。

當您必須根據某些間隔限制檢查值時，僅將其與每個間隔的一個邊界進行比較：

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
  ...
}

---

function calculateFunction()使用一些全局變量（ heightInput ， weightInput ， result ， statement ），這使得很難斷言它使用什么值來進行計算。 此外，它會更改文檔，當您檢查使用 function 的位置時，這也是不可見的。

此外，function 的名稱並沒有描述它的作用。 function 名稱中的“功能”一詞是無用的，它沒有說明任何內容； 盡量避免使用它。 function 的更好名稱是calculateBMI() 。

讓 function 只做 BMI 的計算並返回。 您可以將與文檔交互的代碼（從輸入中獲取值，將 BMI 放入另一個字段）到單獨的 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

在您分配變量值的第 11 行，出現問題。 與重量相比，2 次方的高度會大得多，因此結果將低於 1/2，四舍五入為 0。

你必須更正你的公式

Answer 4

好的，非常感謝您的建議。 我確實看到了我的錯誤。 我正在回答這個問題，因為我得到了如下更好的結果：

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);

這是實際的https://theshadyslim.github.io/BMI-Calculator/