Question

晚上好，大家：＆gt;

我目前正在尝试完成简单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>

Answer 1

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

Answer 2

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

正如nathanjosiah所指出的，你指的是一个“bmi”节点，你可能意味着“totalbmi”。你也混淆了'bmi'和'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); 
  }
}

编辑：正如其他人所指出的，您希望设置输入的.value以更改其显示的内容。 <input>元素为empty，因此设置一个.innerHTML属性不起作用。

Answer 3

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测试，我将输出字段设置为空字符串，而不是保留之前的任何值。）

Answer 4

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

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

另外，要设置输入的值

bmi.value = totalbmi.toFixed(2)

而不是

bmi.innerHTML = totalbmi.toFixed(2)

BMI计算器...除了BMI之外不会出现

4 个答案: