-1

Good evening, everyone :>

I am currently trying to finalize code for a simple BMI calculator. The trouble is that it won't show me a BMI reading when I input my height and weight in my browser. I'm 99% certain that my HTML is solid, it's just the Javascript that seems to be causing problems. Any input I can get on this matter would be appreciated. Thanks!

<!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> 
1
  • 1
    Have you tried debugging the JS portion?
    – user830639
    Feb 13, 2012 at 5:22

4 Answers 4

2

It's not going to update anything because you have var bmi = document.getElementById("bmi"); when it should be var bmi = document.getElementById("totalbmi");

2

document.getElementById() returns the HTML node, not the text inside it. To get the actual weight and height values provided by the user, you should use document.getElementById("height").value.

As nathanjosiah pointed out as well, you're referring to a "bmi" node where you probably meant "totalbmi". You're also confusing your 'bmi' and 'totalbmi' variables.

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); 
  }
}

EDIT: As others pointed out, you want to set the .value of an input in order to change its displayed content. <input> elements are empty, so setting one's .innerHTML property doesn't work.

1
  • That got it working. Thanks a bunch! :3 Feb 13, 2012 at 13:57
1

document.getElementById() returns a reference to the (matching) DOM element itself, not to its value. To get/set the value use the .value property.

Also you are trying to set the result to a field with id "bmi" when the actual field has the id "totalbmi", and you are trying to set that field's .innerHTML (which input elements don't have) instead of its .value.

So taking those problems into account:

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) : "";
}

(Where if the results fail the isFinite test I'm setting the output field to an empty string rather than leaving whatever value was in it before.)

0

In the following line you id is totalbmi, but you are using document.getElementById("bmi");

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

Also, to set the value of the input you would do

bmi.value = totalbmi.toFixed(2)

instead of

bmi.innerHTML = totalbmi.toFixed(2)

Not the answer you're looking for? Browse other questions tagged or ask your own question.