Changing the background colour of table rows using Javascript -
i have created body mass index (bmi) calculator using javascript utilize inputs height , weight , bmi calculated upon clicking button. result displayed , statement highlighted in grey.
everything working expected except when input 1 time again , recalculate produce different result, statement based on previous result remains highlighted. gray highlight produced changing background colour of specific row.
i want find out way of clearing background colours of rows in table between time when click "calculate bmi" , when new result displayed , new statement highlighted again.
i hope makes sense. if play around produce different results you'll see mean.
here 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 number greater 0"); // error number < 0 if (height <=0 || weight <=0) alert ("number must greater 0"); else { // build display 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 :<span id="result"></span></h1> <!-- place holder output --> <table id="table" width="100%" border="0" cellspacing="2" cellpadding="2"> <tr> <td id="1" align="left"><p>under 18 - underweight , possibility malnourished</p></td> </tr> <tr> <td id="2" align="left"><p>under 20 - underweight , afford gain little weight</p></td> </tr> <tr> <td id="3" align="left"><p>20 25 - have healthy weight range young , middle-aged adults</p></td> </tr> <tr> <td id="4" align="left"><p>26 30 - overweight</p></td> </tr> <tr> <td id="5" align="left"><p>over 30 - obese</td> </tr> </table> </div> </div> </body> </html> bmi calculator on http://jsbin.com/
thanks!
david
the easiest thing clear backgroundcolors before highlight new one. add together @ start of else {} block:
for(var = 1; <= 5; i++) { document.getelementbyid(i.tostring()).style.backgroundcolor = ''; } javascript
No comments:
Post a Comment