BMI计算器..除了BMI赢得'不要出现

BMI Calculator... except BMI won't show up

本文关键字：BMI 计算器 除了 赢得      更新时间：2023-09-26

大家晚上好：>

我目前正在尝试完成一个简单的BMI计算器的代码。问题是，当我在浏览器中输入身高和体重时，它不会显示BMI读数。我99%确信我的HTML是可靠的，只是Javascript似乎造成了问题。如果我能就此事提供任何意见，我们将不胜感激。谢谢

<!DOCTYPE HTML>
<html>
<head>
<title>BMI Calculator</title>
<script type="text/javascript">
/* <![CDATA[ */
function calculate() {
var height = document.getElementById("height");
var weight = document.getElementById("weight") * 703;
var denom = Math.pow(height, 2);
var totalbmi = weight/denom;
var bmi = document.getElementById("bmi");
if (isFinite(bmi)) {        
    bmi.innerHTML = totalbmi.toFixed(2); 
}
}
/* ]]> */
</script>
<style type="text/css">
<!--
.result {font-weight: bold; }
-->
</style>
</head>
<body>
<form name="details">
<table>
    <tr>
    <td>Height<br />
        (in Inches)</td>
        <td><input type="text" size="3" id="height"            onChange="calculate();"/></td>
    </tr>
    <tr>
    <td>Weight<br />
        (in Pounds)</td>
    <td><input type="text" size="3" id="weight" onChange="calculate();"/></td>
    </tr>
    <tr>
    <td><input type="button" value="My BMI" onClick="calculate();"/></td>
    </tr>
  </table>
</table>
<table width="270">
  <tr>
    <td width="104">Your BMI is:</td>
    <td width="154"><input type="text" id="totalbmi"></span></td>
  </tr>
</table>
</form>
</body>
</html>

它不会更新任何内容，因为您有var bmi = document.getElementById("bmi");当它应该是var bmi = document.getElementById("totalbmi"); 时

document.getElementById()返回HTML节点，而不是其中的文本。要获得用户提供的实际重量和高度值，应使用document.getElementById("height").value。

正如nathanjosiah所指出的，你指的是"bmi"节点，你的意思可能是"总bmi"。你还混淆了你的"bmi"answers"totalbmi"变量。

function calculate() {
  var height = document.getElementById("height").value;
  var weight = document.getElementById("weight").value * 703;
  var denom = Math.pow(height, 2);
  var totalbmi = weight/denom;
  var bmi = document.getElementById("totalbmi");
  if (isFinite(totalbmi)) {        
    bmi.value = totalbmi.toFixed(2); 
  }
}

编辑：正如其他人所指出的，您需要设置输入的.值来更改其显示的内容。<input>元素为空，因此设置.innerHTML属性不起作用。

document.getElementById()返回对（匹配的）DOM元素本身的引用，而不是对其值的引用。要获取/设置该值，请使用.value属性。

此外，当实际字段的id为"totalbmi"时，您试图将结果设置为id为"bmi"的字段，并且您试图设置该字段的.innerHTML（输入元素没有）而不是其.value。

因此，考虑到这些问题：

function calculate() {    
    var height = document.getElementById("height").value;
    var weight = document.getElementById("weight").value * 703;
    var denom = Math.pow(height, 2);
    var totalbmi = weight/denom;
    document.getElementById("totalbmi").value =
                 isFinite(totalbmi) ? totalbmi.toFixed(2) : "";
}

（如果结果未通过isFinite测试，我会将输出字段设置为空字符串，而不是保留之前的值。）

在下面的行中，您的id是totalbmi，但您使用的是document.getElementById("bmi");

<input type="text" id="totalbmi">

此外，要设置输入的值，您需要进行

bmi.value = totalbmi.toFixed(2)

而不是

bmi.innerHTML = totalbmi.toFixed(2)

相关文章：