Need help with using text boxes and linking them back to java script

CodyJava · 10-12-2012, 02:43 AM

Hi I recently posted, I'm having trouble taking 2 values from 2 text boxes and sending them to another text box. Im suppose to calculate the BMI without using function arguments and using the parseINT() function.

Here's the 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="mass" action="" method="get">
<p>
Weight<input type="text" value="0" name="weight" onchange="calcBMI(document.mass.weight.value)"/>
<br>
Height<input type="text" value="0" name="height" onchange="calcBMI(document.mass.height.value)"/>
<br>
BMI<input type="text" name="result" value="" readonly>
<br>
<input type="button" name="calc" value="Calculate" onclick="calcBMI()">
</p>
</form>
<script type="text/javascript">
function calcBMI(){
var w = document.getElementsByName('weight');
var h = document.getElementsByName('height');
var final = ( w * 703 / ( h*h ) );
form.result.value = final;
}
</script>
</body>
</html>

Thanks.

Philip M · 10-12-2012, 07:58 AM

Here you are. Study it and learn, please. You need to check that the user enters sensible numbers. Also say what units height and weight are to be in.

You should use Number(), not parseInt() to change the input values (strings) to numbers. But if someone insists on parseInt() (not parseINT) remember that you must specify the radix. parseInt() is really intended for use when converting from one number base to another. In any case perhaps you intend parseFloat().

Code:

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Body Mass Index</h1>
<form id="mass" action="" method="get">
<p>
Weight<input type="text"  id="weight" >
<br>
Height<input type="text" id="height">
<br>
BMI<input type="text" id="result" value="" readonly> 
<br>
<input type="button"  value="Calculate" onclick="calcBMI()">
</p>
</form>
<script type="text/javascript">
function calcBMI() {
document.getElementById("result").value = 0;
var w = Number(document.getElementById('weight').value) || 0;  // trap NaN entries
var h = Number(document.getElementById('height').value) || 0;
var final = ( w * 703 / ( h*h ) );
if (final < 1e20) {  // trap infinity
document.getElementById("result").value = final.toFixed(2);
}
}
</script>
</body>
</html>

Study the difference between getElementsByName() and getElementbyId() The getElementsByName() method accesses all elements with the specified name.

Old Pedant offered you a working script in a previous thread. He seems to have wasted his time as you have pretty much ignored him. There is not much point in asking for help if you disregard the suggestions made.

BTW, re your user name CodyJava. Java and Javascript are entirely different programming languages, in spite of the confusingly similar names. Rather like Austria and Australia!

Quizmaster: In which African country did Mahatma Gandhi spend several years as a lawyer?
Contestant: India