Changing the background colour of table rows using Javascript

Question

I have created a Body Mass Index (BMI) calculator using javascript where the use inputs their height and weight and the BMI is calculated upon clicking a button. The result is displayed and a statement is highlighted in grey.

Everything is working as expected except when you input again and recalculate to produce a different result, the statement based on the previous result remains highlighted. The grey highlight is produced by changing the background colour of a specific row.

I want to find out a way of clearing the background colours of the rows in the table between the time when you click "Calculate BMI" and when the new result is displayed and the new statement is highlighted again.

I hope that makes sense. If you play around with it to produce different results you'll see what I mean.

Here is the HTML and 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/

Thanks!

David

Answer 1

The easiest thing to do is just clear all the backgroundColor s before you highlight the new one. So add this at the start of the else {} block:

for(var i = 1; i <= 5; i++)
{
    document.getElementById(i.toString()).style.backgroundColor = '';
}

Answer 2

you need to clear the previous highlight and then highlight the right line.

after this line: document.getElementById("result").innerHTML = display;

add this:

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

it will fix it.

Changing the background colour of table rows using Javascript

Question

2 answers

solution1
0 2014-10-14 12:32:56

solution2
0 2014-10-14 12:42:20

Changing the background colour of table rows using Javascript

Question

2 answers

solution1 0 2014-10-14 12:32:56

solution2 0 2014-10-14 12:42:20

solution1
0 2014-10-14 12:32:56

solution2
0 2014-10-14 12:42:20