Uncaught ReferenceError on simple math calculation form script

Question

any help appreciated with this simple maths script for calculation BMI, scrip works fine on browsers locally, works fine online with internet explorer but does not work online with chrome or edge browser, but works fine on chrome mobile browser! Inspect element shows ‘Uncaught ReferenceError: computeform is not defined at HTML InputElement.onclick’.

<script type="text/javascript" language="javascript">
<!-- hide this script tag's contents from old browsers

function ClearForm(form){

    form.weight.value = "";
    form.height.value = "";
    form.bmi.value = "";
    form.my_comment.value = "";
 form.my_comment2.value = "";

}

function bmi(weight, height) {

          bmindx=weight/eval(height*height);
          return bmindx;
}

function checkform(form) {

       if (form.weight.value==null||form.weight.value.length==0 || form.height.value==null||form.height.value.length==0){
            alert("\nPlease complete the form first");
            return false;
       }

       else if (parseFloat(form.height.value) <= 0||
                parseFloat(form.height.value) >=500||
                parseFloat(form.weight.value) <= 0||
                parseFloat(form.weight.value) >=500){
                alert("\nReally know what you're doing? \nPlease enter values again. \nWeight in kilos and \nheight in cm");
                ClearForm(form);
                return false;
       }
       return true;

}

function computeform(form) {

       if (checkform(form)) {

       yourbmi=Math.round(bmi(form.weight.value, form.height.value/100));
       form.bmi.value=yourbmi;

       if (yourbmi >40) {
          form.my_comment.value="You are grossly obese!";
    form.my_comment2.value="Consult a physician imeadiatly!";
       }

       else if (yourbmi >35 && yourbmi <=40) {
          form.my_comment.value="You are obese!";
    form.my_comment2.value="Consult a physician!";
       }

       else if (yourbmi >30 && yourbmi <=35) {
          form.my_comment.value="You are very over weight!";
    form.my_comment2.value="Weight loss diet and exercise!";
       }

       else if (yourbmi >25 && yourbmi <=30) {
          form.my_comment.value="You are over weight!";
    form.my_comment2.value="Healthy eating and exercise!";
       }

       else if (yourbmi >=18 && yourbmi <=25) {
          form.my_comment.value="You are the correct weight!";
    form.my_comment2.value="Keep doing what your doing!";
       }

       else if (yourbmi >=16 && yourbmi <18) {
          form.my_comment.value="You are under weight!";
    form.my_comment2.value="Eat more healthy food!";
       }

       else if (yourbmi >=14 && yourbmi <16) {
          form.my_comment.value="You are very under weight!";
    form.my_comment2.value="Consult a physician!";
       }

       else if (yourbmi <14) {
          form.my_comment.value="You're grossly under weight!";
    form.my_comment2.value="Consult a physician imeadiatly!";
       }

       }
       return;
}
 // -- done hiding from old browsers -->
</script>

<form name="BMI" method="post">
<table border="2">

<tr>
<td><div>Weight (kg)</div></td> 
</tr>
<tr>
<td><input type="text" name="weight"  size="10" onFocus="this.form.weight.value=''"></td> 
</tr>

<tr>
<td><div>Height (cm)</div></td> 
</tr>
<tr>
<td><input type="text" name="height"  size="10" onFocus="this.form.height.value=''"></td> 
</tr>

<tr>
<td><div>Your BMI</div></td> 
</tr>
<tr>
<td><input type="text" name="bmi" size="10" disabled></td> 
</tr>

<tr>
<td><div>BMI Information</div></td> 
</tr>
<tr>
<td><input type="text" name="my_comment" size="35" disabled></td>  
</tr>

<tr>
<td><div>Recommendation</div></td> 
</tr>
<tr>
<td><input type="text" name="my_comment2" size="35" disabled></td>  
</tr>
</table>

<br>
<input type="button" value="Check BMI" onClick="computeform(this.form)">
<input type="reset"  value="Reset" onClick="ClearForm(this.form)">
</form>

Answer 1

Add the initial javascript comment at the beginning of the file:

// <!-- hide this script tag's contents from old browsers

Moreover, from http://fitness-factory.uk/classes.html I can see the script is defined as

<script type="text/rocketscript" language="javascript" data-rocketoptimized="true">

This means that the script is being handled via CloudFare script optimization method, which will load the script asynchronously after the DOM has loaded.

Try adding data-cfasync="false" to prevent it.

<script data-cfasync="false">

NOTE: the data-cfasync="false" must be added BEFORE the src attribute, even though that shouldn't apply to your case since you are using an inline script.

Answer 2

The script works fine. However, error is caused, because you put the javascript script tags and content within the javascript section of the code snippet. You shouldn't put script tags within the javascript section, since the script tags are html elements.

So either when showing the code snippet, you should remove the javascript tags, and put the javascript code in the javascript section or you should keep the javascript within the html script tags and put it all in the html section. I've put a code snippet of the last solution below.

Furthermore as said in another answer, it is bad practise to put a html formatted comment within the script tags. This does not cause the error, but can cause other problems. More information can be found about this here: Are HTML comments inside script tags a best practice?

I did not correct the html comment within the script tags, to demonstrate that it is not related to the error you get. However, I suggest you adjust the opening of that comment, as is done with the ending of that html comment like this:

<script type="text/javascript" language="javascript">
// <!-- hide this script tag's contents from old browsers

Or better to remove the comment entirely since it's bad practise to try to comment out the script tag's contents.

Here is the example showing what happens when you put all the code in the html section, which generates no errors:

<form name="BMI" method="post">
<table border="2">

<tr>
<td><div>Weight (kg)</div></td> 
</tr>
<tr>
<td><input type="text" name="weight"  size="10" onFocus="this.form.weight.value=''"></td> 
</tr>

<tr>
<td><div>Height (cm)</div></td> 
</tr>
<tr>
<td><input type="text" name="height"  size="10" onFocus="this.form.height.value=''"></td> 
</tr>

<tr>
<td><div>Your BMI</div></td> 
</tr>
<tr>
<td><input type="text" name="bmi" size="10" disabled></td> 
</tr>

<tr>
<td><div>BMI Information</div></td> 
</tr>
<tr>
<td><input type="text" name="my_comment" size="35" disabled></td>  
</tr>

<tr>
<td><div>Recommendation</div></td> 
</tr>
<tr>
<td><input type="text" name="my_comment2" size="35" disabled></td>  
</tr>
</table>

<br>
<input type="button" value="Check BMI" onClick="computeform(this.form)">
<input type="reset"  value="Reset" onClick="ClearForm(this.form)">
</form>

<script type="text/javascript" language="javascript">
<!-- hide this script tag's contents from old browsers

function ClearForm(form){

    form.weight.value = "";
    form.height.value = "";
    form.bmi.value = "";
    form.my_comment.value = "";
 form.my_comment2.value = "";

}

function bmi(weight, height) {

          bmindx=weight/eval(height*height);
          return bmindx;
}

function checkform(form) {

       if (form.weight.value==null||form.weight.value.length==0 || form.height.value==null||form.height.value.length==0){
            alert("\nPlease complete the form first");
            return false;
       }

       else if (parseFloat(form.height.value) <= 0||
                parseFloat(form.height.value) >=500||
                parseFloat(form.weight.value) <= 0||
                parseFloat(form.weight.value) >=500){
                alert("\nReally know what you're doing? \nPlease enter values again. \nWeight in kilos and \nheight in cm");
                ClearForm(form);
                return false;
       }
       return true;

}

function computeform(form) {

       if (checkform(form)) {

       yourbmi=Math.round(bmi(form.weight.value, form.height.value/100));
       form.bmi.value=yourbmi;

       if (yourbmi >40) {
          form.my_comment.value="You are grossly obese!";
    form.my_comment2.value="Consult a physician imeadiatly!";
       }

       else if (yourbmi >35 && yourbmi <=40) {
          form.my_comment.value="You are obese!";
    form.my_comment2.value="Consult a physician!";
       }

       else if (yourbmi >30 && yourbmi <=35) {
          form.my_comment.value="You are very over weight!";
    form.my_comment2.value="Weight loss diet and exercise!";
       }

       else if (yourbmi >25 && yourbmi <=30) {
          form.my_comment.value="You are over weight!";
    form.my_comment2.value="Healthy eating and exercise!";
       }

       else if (yourbmi >=18 && yourbmi <=25) {
          form.my_comment.value="You are the correct weight!";
    form.my_comment2.value="Keep doing what your doing!";
       }

       else if (yourbmi >=16 && yourbmi <18) {
          form.my_comment.value="You are under weight!";
    form.my_comment2.value="Eat more healthy food!";
       }

       else if (yourbmi >=14 && yourbmi <16) {
          form.my_comment.value="You are very under weight!";
    form.my_comment2.value="Consult a physician!";
       }

       else if (yourbmi <14) {
          form.my_comment.value="You're grossly under weight!";
    form.my_comment2.value="Consult a physician imeadiatly!";
       }

       }
       return;
}
 // -- done hiding from old browsers -->
</script>