Question

我使用javascript创建了一个身体质量指数（BMI）计算器，其中使用输入他们的身高和体重，并且点击按钮计算BMI。将显示结果，并以灰色突出显示语句。

除非您再次输入并重新计算以产生不同的结果，否则一切都按预期工作，基于先前结果的语句仍然突出显示。通过更改特定行的背景颜色来生成灰色突出显示。

我想找到一种方法，在您点击＆＃34;计算BMI＆＃34;之间清除表格中行的背景颜色。当显示新结果并再次突出显示新语句时。

我希望这是有道理的。如果你玩它来产生不同的结果，你就会明白我的意思。

这是HTML和Javascript：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BMI Calculator</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="CSS/bmi.css" rel="stylesheet" type="text/css" />
<script language="javascript">
function calculate() {
// Input: height
// Inpuut: weight
// Output: BMI

    var height = document.form1.height.value;
    var weight = document.form1.weight.value; 
    var bmiResult = weight/(height/100*height/100); 

    // error invalid character

    if (isNaN(height) == true || isNaN(weight) == true) alert ("must be a number greater than 0");

    // error number < 0

    if (height <=0 || weight <=0) alert ("number must be greater than 0");

    else {

        // build display for result

        var display =" " + bmiResult.toFixed(2);

        document.getElementById("result").innerHTML = display;

        // hightlight result in table

        if (bmiResult <18) { document.getElementById("1").style.backgroundColor='#A0A0A4'}

        else if (bmiResult >=18 && bmiResult <20) { document.getElementById("2").style.backgroundColor='#A0A0A4'}

        else if (bmiResult >=20 && bmiResult <25) { document.getElementById("3").style.backgroundColor='#A0A0A4'}

        else if (bmiResult >=26 && bmiResult <30) { document.getElementById("4").style.backgroundColor='#A0A0A4'}

        else if (bmiResult > 30) { document.getElementById("5").style.backgroundColor='#A0A0A4'};
        }
}
</script>

</head> 
<body>
<div id="box">
<h>Body Mass Index (BMI) Calculator</h>
<br/>
<!-- Input form -->
<div id="input">
<form id="form1" name="form1" action="" method="post">
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td width="50%" height="30"><label for="height" class="form">Height (cm) :</label></td>
<td height="30" align="right"><input name="height" type="text" size="10" maxlength="10" /></td>
</tr>
<tr>
<td height="40"><label for="weight" class="form">Weight (kg) :</label></td>
<td height="40" align="right"><input name="weight" type="text" size="10" maxlength="10" /></td>
</tr>
<tr>
<td height="30" colspan="2" align="center"><input name="Calculate" type="button" value="Calculate BMI" onClick="javascript: calculate()" /></td>
</tr>
</table>
</form>
</div>
<hr/>
<!-- Output -->
<div id="output">
<h1>Your BMI is :<span id="result"></span></h1> <!-- place holder for output -->

<table id="table" width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td id="1" align="left"><p>Under 18 - You are very underweight and possibility malnourished</p></td>
</tr>
<tr>
<td id="2" align="left"><p>Under 20 - You are underweight and could afford to gain a little weight</p></td>
</tr>
<tr>
<td id="3" align="left"><p>20 to 25 - You have a healthy weight range for young and middle-aged adults</p></td>
</tr>
<tr>
<td id="4" align="left"><p>26 to 30 - You are overweight</p></td>
</tr>
<tr>
<td id="5" align="left"><p>Over 30 - You are obese</td>
</tr>
</table>
</div>
</div>
</body>
</html>

BMI Calculator on http://jsbin.com/

谢谢！

大卫

Answer 1

最简单的方法是在突出显示新backgroundColor之前清除所有else {}。所以在for(var i = 1; i <= 5; i++) { document.getElementById(i.toString()).style.backgroundColor = ''; }块的开头添加它：

{{1}}

Answer 2

您需要清除上一个突出显示，然后突出显示右侧。

这一行之后： document.getElementById（＆＃34; result＆＃34;）。innerHTML = display;

添加：

            for (j = 1; j < 6; j++)
              {
                document.getElementById(j).style.backgroundColor="";
              }

它会修复它。

使用Javascript更改表行的背景颜色

2 个答案: