stackoom
  简体   繁体   中英

Basic BMI Calculator HTML/Javascript

 原文  2014-02-11 09:37:17  6   5    javascript/ html

Question

I am trying to create a basic HTML/JavaScript BMI calculator.

There should be a message shown underneath: your bmi is: , and then the message underneath is this means you are: according to the BMI calculated above.

Please can someone help me fix my calculator, I know there are problems with my if statements? Thanks.

Less than 18.5  Underweight
18.5 to 25  Normal
25-30           Overweight
More than 30    Obese

. 

<html>
<head>
    <title>BMI Calculator</title>
    <script type="text/javascript">
        function computeBMI()
        {
            //Obtain user inputs
            var height=Number(document.getElementById("height").value);
            var heightunits=document.getElementById("heightunits").value;
            var weight=Number(document.getElementById("weight").value);
            var weightunits=document.getElementById("weightunits").value;


            //Convert all units to metric
            if (heightunits=="inches") height/=39.3700787;
            if (weightunits=="lb") weight/=2.20462;

            //Perform calculation
            var BMI=weight/Math.pow(height,2);

            //Display result of calculation
            document.getElementById("output").innerText=Math.round(BMI*100)/100;

            if (output<18.5)
            document.getElementById("comment").value = "Underweight";
            if (output>=18.5 && output<=25)
            document.getElementById("comment").value = "Normal";
            if (output>=25 && output<=30)
            document.getElementById("comment").value = "Obese";
            if (output>30)
            document.getElementById("comment").value = "Overweight";
            document.getElementById("answer").value = output; 
        }
    </script>
</head>
<body>
    <h1>Body Mass Index Calculator</h1>
    <p>Enter your height: <input type="text" id="height"/>
        <select type="multiple" id="heightunits">
            <option value="metres" selected="selected">metres</option>
            <option value="inches">inches</option>
        </select>
    </p>
    <p>Enter your weight: <input type="text" id="weight"/>
        <select type="multiple" id="weightunits">
            <option value="kg" selected="selected">kilograms</option>
            <option value="lb">pounds</option>
        </select>
    </p>
    <input type="submit" value="computeBMI" onclick="computeBMI();">
    <h1>Your BMI is: <span id="output">?</span></h1>

    <h2>This means you are: value = "output" </h2> 
</body>

5 answers

solution1
 2  2015-08-10 12:41:47

hi i forgot to say :D it will work and you can find your problem in line 23 (in the first answer edit :D ) good luck

 <!DOCTYPE html> <html> <head> <title>BMI Calculator</title> <script type="text/javascript"> function computeBMI() { // user inputs var height = Number(document.getElementById("height").value); var heightunits = document.getElementById("heightunits").value; var weight = Number(document.getElementById("weight").value); var weightunits = document.getElementById("weightunits").value; //Convert all units to metric if (heightunits == "inches") height /= 39.3700787; if (weightunits == "lb") weight /= 2.20462; //Perform calculation // var BMI = weight /Math.pow(height, 2)*10000; var BMI = Math.round(weight / Math.pow(height, 2) * 10000); //Display result of calculation document.getElementById("output").innerText = Math.round(BMI * 100) / 100; var output = Math.round(BMI * 100) / 100 if (output < 18.5) document.getElementById("comment").innerText = "Underweight"; else if (output >= 18.5 && output <= 25) document.getElementById("comment").innerText = "Normal"; else if (output >= 25 && output <= 30) document.getElementById("comment").innerText = "Obese"; else if (output > 30) document.getElementById("comment").innerText = "Overweight"; // document.getElementById("answer").value = output; } </script>`enter code here` </head> <body> <h1>Body Mass Index Calculator</h1> <p>Enter your height: <input type="text" id="height"/> <select type="multiple" id="heightunits"> <option value="metres" selected="selected">metres</option> <option value="inches">inches</option> </select> </p> <p>Enter your weight: <input type="text" id="weight"/> <select type="multiple" id="weightunits"> <option value="kg" selected="selected">kilograms</option> <option value="lb">pounds</option> </select> </p> <input type="submit" value="computeBMI" onclick="computeBMI();"> <h1>Your BMI is: <span id="output">?</span></h1> <h2>This means you are: <span id="comment"> ?</span> </h2> </body> </html>

solution2
 1  2014-02-11 10:00:35

I have made some changes to your code ..

Check whether it works for you.

good luck

<html>
    <head>
        <title>BMI Calculator</title>
        <script type="text/javascript">              
     function computeBMI() {
          //Obtain user inputs
         var height = Number(document.getElementById("height").value);
         var heightunits = document.getElementById("heightunits").value;
         var weight = Number(document.getElementById("weight").value);
         var weightunits = document.getElementById("weightunits").value;


         //Convert all units to metric
         if (heightunits == "inches") height /= 39.3700787;
         if (weightunits == "lb") weight /= 2.20462;

         //Perform calculation
         var BMI = weight / Math.pow(height, 2);
         //Display result of calculation
    document.getElementById("output").innerHTML = Math.round(BMI * 100)/100;
         if (BMI < 18.5) document.getElementById("comment").innerHTML = "Underweight";
         if (BMI >= 18.5 && BMI <= 25) document.getElementById("comment").innerHTML = "Normal";
         if (BMI >= 25 && BMI <= 30) document.getElementById("comment").innerHTML = "Obese";
         if (BMI > 30) document.getElementById("comment").innerHTML = "Overweight";            
     }
       }
        </script>
    </head>
    <body>
         <h1>Body Mass Index Calculator</h1>
        <p>Enter your height:
            <input type="text" id="height" />
            <select type="multiple" id="heightunits">
                <option value="metres" selected="selected">metres</option>
                <option value="inches">inches</option>
            </select>
        </p>
        <p>Enter your weight:
            <input type="text" id="weight" />
            <select type="multiple" id="weightunits">
                <option value="kg" selected="selected">kilograms</option>
                <option value="lb">pounds</option>
            </select>
        </p>
        <input type="button" value="computeBMI" onclick="computeBMI()"/>
         <h1>Your BMI is: <span id="output">?</span></h1>

        <h2>This means you are: value = <span id='comment'></span> </h2> 
    </body>
</html>

Here is my fiddle JSFIDDLE

You cannot use like document.getElementById("comment").value = "Underweight"; Use the same like document.getElementById("comment").innerHTML = "Underweight"; //innerHTML property is used to set the inner text of the span here.

.value will work if it is a text field but not for span

solution3
 1  2014-02-11 10:10:44

 <html>
 <head>
<title>BMI Calculator</title>
<script type="text/javascript">
    function computeBMI()
    {
        //Obtain user inputs
        var height=Number(document.getElementById("height").value);
        var heightunits=document.getElementById("heightunits").value;
        var weight=Number(document.getElementById("weight").value);
        var weightunits=document.getElementById("weightunits").value;


        //Convert all units to metric
        if (heightunits=="inches") height/=39.3700787;
        if (weightunits=="lb") weight/=2.20462;

        //Perform calculation
        var BMI=weight/Math.pow(height,2);

        //Display result of calculation
        document.getElementById("output").innerText=Math.round(BMI*100)/100;

        var output =  Math.round(BMI*100)/100
        if (output<18.5)
        document.getElementById("comment").innerText = "Underweight";
      else   if (output>=18.5 && output<=25)
        document.getElementById("comment").innerText = "Normal";
     else   if (output>=25 && output<=30)
        document.getElementById("comment").innerText = "Obese";
     else   if (output>30)
        document.getElementById("comment").innerText = "Overweight";
       // document.getElementById("answer").value = output; 
    }
</script>
 </head>
 <body>
<h1>Body Mass Index Calculator</h1>
<p>Enter your height: <input type="text" id="height"/>
    <select type="multiple" id="heightunits">
        <option value="metres" selected="selected">metres</option>
        <option value="inches">inches</option>
    </select>
     </p>
<p>Enter your weight: <input type="text" id="weight"/>
    <select type="multiple" id="weightunits">
        <option value="kg" selected="selected">kilograms</option>
        <option value="lb">pounds</option>
    </select>
</p>
<input type="submit" value="computeBMI" onclick="computeBMI();">
<h1>Your BMI is: <span id="output">?</span></h1>

<h2>This means you are: <span id="comment"> ?</span> </h2> 
 </body>

This should work. The things wrong with what you have done , is that the var output is not assigned any value. and document.getElementById("comment") results in an empty set(null), hence the error : Cannot set property value of null . And i don't understand what you wish to accomplish by the statement document.getElementById("answer").value = output so unless you explain that, i have commented it.

solution4
 1  2014-04-15 07:32:27

I am not sure your formula is correct.

At this point your formula is Weight/(height^2)

It should be Weight/(height^2)*703

solution5
 0  2020-08-16 19:56:11

"It should be Weight/(height^2)*703"

That's for English not for Metric but seeing as everything is being coverted to Metric, it's not needed.

BMI calculation is still incorrect as it shows mine as some number in the 380 thousands.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question BMI Calculator JavaScript How to write javascript code for BMI_Calculator.html? Javascript bmi calculator pointer position Javascript BMI calculator doesn't work in IE To create a bmi calculator on my website using javascript Round a result number for JavaScript BMI calculator in metric How to implement basic calculator in HTML & Javascript How to create a BMI calculator using JavaScript with options to choose between BMI in Kgs/metters or BMI in Lbs/feet Making a basic Javascript calculator Basic JavaScript Calculator
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM