How to create a function call in javascript with xhtml?

Question

How to create a function call in javascript with xhtml?

4.1k Views Asked by Phibermatrix At 06 April 2025 at 07:25

Here is the code that i have so far I am having trouble getting the code to execute the function and properly output the data from the function to the "Total BMI" text box I have been searching for hours on this trying to figure it out. this is a class assignment I am having trouble with it because I am not understanding the syntax used in javascript to do everything that I need done. My teacher is literally of no help as this is our second assignment and has never had a lecture on how to even begin writing code in Javascript. Thanks for any help that anyone may provide.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BMI Calculator</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<link rel="stylesheet" href="BMI.css" type="text/css" />
<script type="text/javascript">
/* <![CDATA[ */
function calcBMI(Height, Weight) {
     var h = parseInt(height);s
     var w = parseInt(Wieght);
     var TotalBMI = w * 703 / (h * h);
     document.write ("Your BMI is: " + TotalBMI)  
}

/* ]]> */
</script>

</head>
<body>
<h2>BMI Calculator</h2>
<form action="" name="BMI">
<table border="1">
<tr><td>Height :(in)</td><td><input type="text" name="Height" value="" /></td></tr>
<tr><td>Weight :(lbs)</td><td><input type="text" name="Weight" value="" /></td></tr>
<tr><td><input type = "button" value = "Calculate" onclick = "calcBMI('Height', 'Weight')"></td></tr>
<tr><td>Total BMI:</td><td><input type="text" name="TotalBMI" value="" /></td></tr>
</table>
</form>
</body>
</html>

Original Q&A

There are 2 best solutions below

Andrew Cheong On 12 September 2014 at 17:49

Here,

onclick = "calcBMI('Height', 'Weight')"

you're passing the strings 'Height' and 'Weight', although you mean to pass the values of the related fields. Forms don't work that way, so instead you should get rid of the parameters altogether,

onclick = "calcBMI()"

and in the function, use DOM traversal to get the values you need. First, add some id attributes to the fields you're interested in, e.g.

<tr><td>Height :(in)</td><td><input type="text" name="Height" value="" id="height" /></td></tr>
<tr><td>Weight :(lbs)</td><td><input type="text" name="Weight" value="" id="width" /></td></tr>

then get their value like so:

function calcBMI() {
     var h = parseInt(document.getElementById('height').value);
     var w = parseInt(document.getElementById('weight').value);
     var TotalBMI = w * 703 / (h * h);
     document.write ("Your BMI is: " + TotalBMI)  
}

**Spencer Wieczorek** · Accepted Answer

First lets look at this:

onclick = "calcBMI('Height', 'Weight')"

Your passing strings here, in which can't convert to be an integer (at least not the type your expecting). It appears you want to get the values of your elements with the names Height and Width. Well this is a good use of id's other than name's.

<tr><td>Height :(in)</td><td><input type="text" id="Height" value="" /></td></tr>
<tr><td>Weight :(lbs)</td><td><input type="text" id="Weight" value="" /></td></tr>
...
<tr><td>Total BMI:</td><td><input type="text" id="TotalBMI" value="" /></td></tr>

Now don't need any parameters for the calcBMI() functions because we can get them directly like so:

document.getElementById("Height").value;

So here are the changes to your function:

function calcBMI() {
    var h = parseInt(document.getElementById("Height").value);
    var w = parseInt(document.getElementById("Weight").value);
    var TotalBMI = w * 703 / (h * h);
    document.getElementById("TotalBMI").value = "Your BMI is: " + TotalBMI;  
}

Note I changed the document.write() to .innerHTML. Because running document.write() after the page loads rewrites the DOM.

Also note that submitting the <form> will refresh your page. It does not appear you really need the <form>, so I recommend just removing it. Either that or prevent the default page refresh behavior.

How to create a function call in javascript with xhtml?

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in XHTML-1.1

Trending Questions

Popular # Hahtags

Popular Questions