Need help with returning value from function

CodyJava · 10-11-2012, 10:21 PM

Hi my problem is that I am suppose to calculate the BMI from two text boxes while using a function to do it. I'm having trouble returning the value from the function. I'm new to javascript and I'm not sure if there's any other problems with my code.

Here's the code.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function calcBMI(){
var temp =(weight*703)/(height*height);
var final = parseInt(temp);
document.getElementById('finalbmi').value = calcBMI;
}
</script>
</head>
<body>
<h1>Body Mass Index</h1>
<form name="bmi" action="mailto:codymhorton@hotmail.com" method="get">
<p>
Weight<input type="text" value="0" name="weight" onchange="calcBMI(document.bmi.weight.value)">
<br>
Height<input type="text" value="0" name="height" onchange="calcBMI(document.bmi.height.value)">
<br>
BMI<input type="text" id="finalbmi" name="result" value=""> 
<br>
<input type="button" value="Calculate" onclick="calcBMI();">
</p>
</form>
</body>
</html>

Any help would be appreciated, thanks.

WolfShade · 10-11-2012, 10:24 PM

You're calling the function from within the function. Or at least attempting to.

Use the getElementById to set the value of final, not calcBMI.

CodyJava · 10-11-2012, 10:29 PM

Okay if I understand you correctly I need to change

document.getElementById('finalbmi').value = calcBMI;

to

document.getElementById('finalbmi').value = final;

I did this and it still doesn't display a number is there something else wrong with the code?

Thanks.

Old Pedant · 10-11-2012, 11:52 PM

Code:

<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Body Mass Index</h1>
<form id="bmi" action="mailto:codymhorton@hotmail.com" method="get">
<p>
Weight<input type="text" value="0" name="weight"/> (in pounds)
<br>
Height<input type="text" value="0" name="height"/> (in inches)
<br>
BMI<input type="text" name="result" value="" readonly>
<br>
<input type="button" name="calc" value="Calculate">
</p>
</form>

<script type="text/javascript">
(
  function( )
  {
      var form = document.getElementById("bmi");
      form.weight.onchange = calcBMI;
      form.height.onchange = calcBMI;
      form.calc.onclick = calcBMI;

      function calcBMI()
      {
           var w = parseFloat(form.weight.value);
           var h = parseFloat(form.height.value);
           var final = "";
           if ( ! isNaN(w) && ! isNaN(h) && h != 0 )
           {
               final = ( w * 703 / ( h*h ) ).toFixed(0);
           }
           form.result.value = final;
     }
  }
)( );
</script>

</body>
</html>

That's called "unobtrusive" JavaScript.