BMI计算器...除了BMI不会出现
晚上好，各位:>
我目前正在尝试完成一个简单的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> 回答 4
Stack Overflow用户
发布于 2012-02-13 13:24:50
它不会更新任何东西，因为当它应该是var bmi = document.getElementById("totalbmi");的时候，却有了var bmi = document.getElementById("bmi");
Stack Overflow用户
发布于 2012-02-13 13:25:09
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属性不起作用。
Stack Overflow用户
发布于 2012-02-13 13:34:02
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测试，我会将输出字段设置为空字符串，而不是保留之前的值。)
https://stackoverflow.com/questions/9255942
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号