Javascript function not doing anything with innerHTML

Question

So, I have wrote the following code to calculate the BMI. The problem I'm facing is that my javascript function does not work. I even tried by inserting a sample text(commented in the code) for testing using javascript, but that's not working. Can someone help me identify the problem?

 <h2>Welcome to BMI calculator</h2> <h4>Please fill in the required data.</h4> <form name="bmiform"> <fieldset style="width:280px;"> <legend> BMI CALCULATOR </legend> Name: <input type="text" value="" name="name"> <br> <br>Height: <input type="text" value="" name="height">Meters <br> <br>Weight: <input type="text" value="" name="weight">Kilograms <br> <br> <input type="button" value="Calculate" onclick="BMIcalc(document.bmiform.weight.value,document.bmiform.height.value)"> </fieldset> </form> <div> <br> <br>Your BMI is: <b id="samples"></b> <!--Inner HTML does not inserts text in here--> <script> document.getElementById("samples").innerHTML = "Testing purposes"; //This code does not work. function BMIcalc(parseFloat(weight), parseFloat(height)) { var bmi = (weight / (height * height)); document.getElementById("samples").innerHTML = bmi; } </script> <br> <br> <table border="1" width="300px"> <tr> <th> BMI </th> <th> Weight Status </th> </tr> <tr> <td> Below 18.5 </td> <td> Underweight </td> </tr> <tr> <td> 18.5-24.9 </td> <td> Normal </td> </tr> <tr> <td> 25.0-29.9 </td> <td> Overweight </td> </tr> <tr> <td> 30.0 and above </td> <td> Obese </td> </tr> </table> </div>

Answer 1

You can't do a thing like this function BMIcalc(parseFloat(weight), parseFloat(height)) in your function declaration.

It must be function BMIcalc(weight, height) And your parsefloat should be inside your function body or in function call.

Answer 2

Edit your function as follows, the parseFloat should be called within the function, you cannot call a function in a function declaration parameters like you are doing:

function BMIcalc(weight, height) {
  var bmi = (parseFloat(weight) / (parseFloat(height) * parseFloat(height)));
  document.getElementById("samples").innerHTML = bmi;
}

Answer 3

Edited: 1. I prefer not parse any value to onclick , so I move the retrieve into function BMIcalc . 2. you can't do any action to your parameter field, you have to parse or do something else in function.

 document.getElementById("samples").innerHTML = "Testing purposes"; //This code does not work. function BMIcalc() { var weight = parseFloat(document.bmiform.weight.value); var height = parseFloat(document.bmiform.height.value); var bmi = (weight / (height * height)); document.getElementById("samples").innerHTML = bmi; }

 <h2>Welcome to BMI calculator</h2> <h4>Please fill in the required data.</h4> <form name="bmiform"> <fieldset style="width:280px;"> <legend> BMI CALCULATOR </legend> Name: <input type="text" value="" name="name"> <br> <br>Height: <input type="text" value="" name="height">Meters <br> <br>Weight: <input type="text" value="" name="weight">Kilograms <br> <br> <input type="button" value="Calculate" onclick="BMIcalc()"> </fieldset> </form> <div> <br> <br>Your BMI is: <b id="samples"></b> <!--Inner HTML does not inserts text in here--> <br> <br> <table border="1" width="300px"> <tr> <th> BMI </th> <th> Weight Status </th> </tr> <tr> <td> Below 18.5 </td> <td> Underweight </td> </tr> <tr> <td> 18.5-24.9 </td> <td> Normal </td> </tr> <tr> <td> 25.0-29.9 </td> <td> Overweight </td> </tr> <tr> <td> 30.0 and above </td> <td> Obese </td> </tr> </table> </div>