为什么我的 BMI 计算器显示错误的 BMI？

Question

我正在尝试制作一个 BMI 计算器。 直到昨天它工作正常，但后来它停止显示正确的 BMI。 我很确定我的所有 document.getElementById 都是正确的。 我尝试在谷歌上搜索它，但找不到任何东西。

 function convert() { var ft = document.getElementById("feetInput").value; var ftInches = ft * 12; var ftInchesSq = ftInches * ftInches; var inches = document.getElementById("inchInput").value; var inchesSq = inches * inches; var heightSquared = inchesSq + ftInchesSq; var pounds = document.getElementById("lbsInput").value; var bmi1 = pounds / heightSquared; var bmi2 = bmi1 * 703; var bmi = bmi2.toFixed(2); if (bmi < 18.5) { document.getElementById("outputBox").value = bmi + " - Underweight"; } if (bmi > 18.51 && bmi < 24.99) { document.getElementById("outputBox").value = bmi + " - Normal weight"; } if (bmi > 25 && bmi < 29.99) { document.getElementById("outputBox").value = bmi + " - Pre-obesity"; } if (bmi > 30 && bmi < 34.99) { document.getElementById("outputBox").value = bmi + " - Obesity class 1"; } if (bmi > 35 && bmi < 39.99) { document.getElementById("outputBox").value = bmi + " - Obesity class 2"; } if (bmi >= 40) { document.getElementById("outputBox").value = bmi + " - Obesity class 3"; } }

 <script src="ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Covered+By+Your+Grace" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:800" rel="stylesheet"> <div class="page"> <header> <h1> BMI Calculator </h1> </header> <span> <u> Enter your height and weight </u> </span> <br><br> <input type="text" id="feetInput"> &nbsp; <span id="feet"> Feet </span> <br><br> <input type="text" id="inchInput"> &nbsp; <span id="inch"> Inch </span> <br><br> <input type="text" id="lbsInput"> &nbsp; <span id="lbs"> Pounds </span> <br><br> <button onclick="convert()"> Calculate </button> <br><br> <input type="text" id="outputBox" name="outputBoxName" disabled="disabled"> <br> </div>

Answer 1

它可能是这些位：

case (b > 18.51 && b < 24.99)

我注意到您的代码中有几个，并且您的语法错误。

以上内容应为：

case ( (b > 18.51) && (b < 24.99) )

因为您实际编写的内容等同于 ((b > (18.51 && b)) < 24.99) 将始终返回“true”，因为 (b > (18.51 && b)) 将解析为 0 或 1 始终小于 24.99 .

更改 case 语句的语法。

Answer 2

考虑以下 jQuery 示例。 使用 JavaScript，您仍然可以这样做。

 $(function() { function convert(f, i, p) { var ftInches = f * 12; var ftInchesSq = ftInches * ftInches; var inchesSq = i * i; var heightSquared = inchesSq + ftInchesSq; var bmi1 = p / heightSquared; var bmi2 = bmi1 * 703; return bmi2.toFixed(2); } function classify(b) { var rVal = b; switch (true) { case (b < 18.5): rVal += " - Underweight"; break; case (b > 18.51 && b < 24.99): rVal += " - Normal weight"; break; case (b > 25 && b < 29.99): rVal += " - Pre-obesity"; break; case (b > 30 && b < 34.99): rVal += " - Obesity class 1"; break; case (b > 35 && b < 39.99): rVal += " - Obesity class 2"; break; case (b >= 40): rVal += " - Obesity class 3"; break; }; return rVal; } $("button").click(function() { var bmi = convert(parseInt($("#feetInput").val()), parseInt($("#inchInput").val()), parseInt($("#lbsInput").val())); $("#outputBox").val(classify(bmi)); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Covered+By+Your+Grace" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:800" rel="stylesheet"> <div class="page"> <header> <h1> BMI Calculator </h1> </header> <span> <u> Enter your height and weight </u> </span> <br><br> <input type="text" id="feetInput"> &nbsp; <span id="feet"> Feet </span> <br><br> <input type="text" id="inchInput"> &nbsp; <span id="inch"> Inch </span> <br><br> <input type="text" id="lbsInput"> &nbsp; <span id="lbs"> Pounds </span> <br><br> <button> Calculate </button> <br><br> <input type="text" id="outputBox" name="outputBoxName" disabled="disabled"> <br> </div>

将步骤分解为易于使用的功能。 输入值总是字符串，所以最好在使用数学时将它们转换为 Integer。