<apex:page id="pgId" controller="calculateBMICon">
    <script language="JavaScript">
        function calculateBmi() {
             var weight =   document.getElementById('pgId:bmiForm:pb:pbs:we').value;
               
            var height =document.getElementById('pgId:bmiForm:pb:pbs:he').value;

            if(weight > 0 && height > 0){   
                var finalBmi = weight/(height/100*height/100)
                document.getElementById('pgId:bmiForm:pb:pbs1:bm').innerHTML =   finalBmi;
              
                if(finalBmi < 18.5){
                    document.getElementById('pgId:bmiForm:pb:pbs1:bw').innerHTML = "UNDER-WEIGHT"
                }
                if(finalBmi > 18.5 && finalBmi < 25){
                    document.getElementById('pgId:bmiForm:pb:pbs1:bw').innerHTML = "NORMAL-WEIGHT"
                }
                if(finalBmi > 25){
                    document.getElementById('pgId:bmiForm:pb:pbs1:bw').innerHTML = "OVER-WEIGHT"
                }
            }
            else{
                alert("Please Fill everything correctly")
            }
        }
    </script>

    <apex:form id="bmiForm">
        <apex:pageblock mode="mainDetail" id="pb">
            <apex:pageBlockSection columns="1" id="pbs">
                <apex:inputText label="{!$objectType.Volunteer__c.fields.Name.label}" />
                <apex:inputText label="{!$objectType.Volunteer__c.fields.Height_in_CMs__c.label}" id="he"/>
                <apex:inputText label="{!$objectType.Volunteer__c.fields.Weight_in_KGs__c.label}" id="we"/>
            </apex:pageBlockSection>
            <apex:pageblockSection id="pbs1">
                <apex:outputLabel id="bm" value=""/>
                 <apex:outputLabel id="bw" value=""/>
            </apex:pageblockSection>
            <apex:pageBlockButtons >
                <apex:commandButton value="Calculate BMI" onclick="calculateBmi()"/>
            </apex:pageBlockButtons>
        </apex:pageblock>

    </apex:form>
         
</apex:page>