BMI计算器以Javascript显示结果

BMI Calculator displaying result in Javascript

本文关键字：显示 结果 Javascript 计算器 BMI      更新时间：2023-09-26

所以我正在编写一个BMI计算器，显示用户的BMI效果很好，但我很难用javascript来显示结果的含义。在用户输入他们的身高和体重并按下评估BMI按钮后，他们的BMI数值就会出现，但我如何才能包括结论变量来确定他们的范围？其他一切都很好，只是把它们的结果和数字输出联系起来。非常感谢。

<script type="text/javascript"> function assessBMI() {
var heightInInches = document.getElementById("height").value;
var weightInPounds = document.getElementById("weight").value;
var calcBMI = Math.floor((weightInPounds * 703) / (heightInInches * heightInInches));
var conclusion;
document.getElementById("BMI").value = calcBMI;
document.getElementById("result").value = conclusion;
switch (calcBMI) {
       case (calcBMI < 18.5) :
           conclusion = 'You are underweight';
           break;
       case (calcBMI > 18.5) && (calcBMI < 24.9) :
           conclusion = 'You fall within the average range';
           break;
       case (calcBMI >= 25) && (calcBMI < 29.9) :
           conclusion = 'You are overweight';
           break;
       case (calcBMI > 30) :
           conclusion = 'You are obese';
           break;
 <input type="button" value="assessBMI" onclick="assessBMI();">

当您调用document.getElementById("result").value = conclusion;时，conclusion仍然未定义。您必须在开关语句之后设置该值。

请注意，开关块末尾缺少一个闭合括号，这可能会干扰代码。最终应该是这样的：

switch (calcBMI) {
   // cases
}
document.getElementById("result").value = conclusion;

如果创建一个单独的函数，接受BMI输入并返回"结论"，则可能会改善组织。所以assessBMI()可能会变成这样：

function assessBMI() {
    var heightInInches = document.getElementById("height").value;
    var weightInPounds = document.getElementById("weight").value;
    var calcBMI = Math.floor((weightInPounds * 703) / (heightInInches * heightInInches));
    document.getElementById("BMI").value = calcBMI;
    document.getElementById("result").value = bmiConclusion(calcBMI);
}

然后你可以集中精力计算BMI的范围。最简单的方法可能只是一系列if...else语句：

function bmiConclusion(bmi){
    if(bmi <= 18.5)
        return 'You are underweight';
    else if(bmi > 18.5 && bmi <= 24.9 )
        return 'You fall within the average range';
    else if(bmi > 24.9  && bmi <= 30)
        return 'You are overweight';
    else if(bmi > 30)
        return 'You are obese';
    else
        return '';
}

您可以使用switch语句，但我认为它不会使代码变得更可读或更易于管理：

function bmiConclusion(bmi){
    switch (true) {
        case (bmi <= 18.5) :
            return 'You are underweight';
        case (bmi > 18.5) && (bmi <= 24.9 ) :
            return 'You fall within the average range';
        case (bmi > 24.9 ) && (bmi <= 30) :
            return 'You are overweight';
        case (bmi > 30) :
            return 'You are obese';
        default:
            return '';
    }
}

它实际上会使代码变长，再加上您最终得到的是那个奇怪的switch (true)语句。

使用此代码；我已经固定好了孔，还把document.getElementById("result").value = conclusion;移到了最后。我希望这正是你所需要的。

function assessBMI() {
    var heightInInches = document.getElementById("height").value;
    var weightInPounds = document.getElementById("weight").value;
    var calcBMI = Math.floor((weightInPounds * 703) / (heightInInches * heightInInches));
    var conclusion;
    document.getElementById("BMI").value = calcBMI;
    switch (calcBMI) {
       case (calcBMI < 18.5) :
           conclusion = 'You are underweight';
           break;
       case (calcBMI >= 18.5) && (calcBMI < 25) :
           conclusion = 'You fall within the average range';
           break;
       case (calcBMI >= 25) && (calcBMI < 30) :
           conclusion = 'You are overweight';
           break;
       case (calcBMI >= 30) :
           conclusion = 'You are obese';
           break;
    }
    document.getElementById("result").value = conclusion;
}
相关文章：