3 {{ upvoteCount | shortNum }}
3 {{ upvoteCount | shortNum }}

Need help with Html

by aworkouts
2 replies
  • WEB DESIGN
    • |
I'm trying to put together that BMI calculator and I have hard time doing so. I am new in HTML and java script and will really appreciate some help here. My goal is to let the user choose between Metric or English system (cm, kg-inch, lbs ). And here is what I have so far-
<html>
<head>
<script type="text/javascript">
<!-- Begin
function mod(div,base)
{ return Math.round(div - (Math.floor(div/base)*base));
}
function calcBmi()
{ var w1 = document.getElementById("d1").value * 2.2;
var w = document.getElementById("d2").value * 1;
var h = document.getElementById("htin").value * 1;
var h1 = document.getElementById("htcm").value * 2.54;
w=w1*2.2
h=h1*2.54
displaybmi = (Math.round((w * 703) / (h * h)));
var rvalue = true;
{
document.getElementById("answer").value = displaybmi;
if (displaybmi <19)
document.getElementById("comment").value = "Underweight";
if (displaybmi >=19 && displaybmi <=25)
document.getElementById("comment").value = "Desirable";
if (displaybmi >=26 && displaybmi <=29)
document.getElementById("comment").value = "prone to health risks";
if (displaybmi >=30 && displaybmi <=40)
document.getElementById("comment").value = "Obese";
if (displaybmi >40)
document.getElementById("comment").value = "Extremely obese";
document.getElementById("answer").value = displaybmi;
}
return rvalue;
}
// End -->
</script>
</head>
<body>
<form>
<table width=200 border=0>
<tr><td align=center>
<tr><td align=center><B>Weight:</B>
<input type=text SIZE=3 maxlength=3>
<input type="radio" id="d1" name="d">kg
<input type="radio" id="d2" name="d">lb
<tr><td align=center><B>Height:</B>
<input type=text SIZE=3 maxlength=3>
<input type=radio id="htin" size=3 name="d1">cm
<input type=radio id="htcm" size=3 name="d1"> in
</td></tr>
<tr><td align=center>
<input type=button value="Calculate BMI" onclick="calcBmi()">
<hr></td></tr>
<tr><td><B>Body Mass Index</B>
<input type=text id="answer" size=2>
</td></tr>
<tr><td> Your category is:<br>
<input type=text id="comment" size=18>
</td></tr>
</table>
</form>
</body>
</html>
#html
  • Profile picture of the author TheContentAuthority
    Aworkouts,

    You could use some conditional logic with a radio button to show or hide a div that contains the different calculator. For example users could first select whether they wanted to calculate their BMI using English or Metric units.

    First set up a javascript function. Something like this.

    <script type="text/javascript">
    function checkunits(selectedType){
    if(selectedType == ‘metric'){
    document.getElementById('metric_calc').style.displ ay = 'block';
    }
    else{
    document.getElementById('metric_calc').style.displ ay = 'none';
    }
    }
    </script>

    Then make sure you call your function in the radio button that users click to select the different calculator.

    <input type=”radio” name=”metric” id=”metric” onclick=”checkunits()” /> Metric Units

    <div id=”metric_calc” style=”display:none”>
    Your alternate calculator code can go here.
    </div>

    Hope that helps,

    Shawn
    Signature
    Outsource to the experts...

    We customize your Blog, eBook, Press Release and Sale Copy content with your message.

    {{ DiscussionBoard.errors[7445543].message }}
    • Profile picture of the author Rideem3
      Also, in JavaScript you can't use "<!--" HTML type comments. You have to use JavaScript comments:
      /*This is a comment*/
      //This is a comment
      {{ DiscussionBoard.errors[7445613].message }}

Trending Topics