基本BMI计算器HTML / Javascript

时间：2014-02-11 09:37:18

标签： javascript html

我正在尝试创建一个基本的HTML / JavaScript BMI计算器。

下面应显示一条消息：your bmi is:，然后根据上面计算的BMI，下面的消息为this means you are:。

请有人帮我修理我的计算器，我知道我的if声明存在问题吗？感谢。

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 个答案:

答案 0 :(得分：2)

嗨，我忘了说：D它会起作用，你可以在第23行找到你的问题（在第一个答案编辑中：D）祝你好运

<!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>

答案 1 :(得分：1)

 <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>

这应该有效。您所做的事情的错误在于var output未分配任何值。和document.getElementById("comment")导致空集（null），因此错误：Cannot set property value of null。我不明白你希望通过陈述document.getElementById("answer").value = output完成什么，所以除非你解释，否则我已对此发表评论。

答案 2 :(得分：0)

我对您的代码进行了一些更改..

检查它是否适合您。

祝你好运

<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>

这是我的小提琴 JSFIDDLE

你不能像document.getElementById("comment").value = "Underweight";一样使用 像document.getElementById("comment").innerHTML = "Underweight";一样使用 // innerHTML属性用于设置span的内部文本。

.value如果是文本字段但不适用于span

，则会起作用

答案 3 :(得分：0)

我不确定你的公式是否正确。

此时你的公式是重量/（高度^ 2）

应该是重量/（高度^ 2）* 703

答案 4 :(得分：0)

“应为体重/（身高^ 2）* 703”

这是针对英语而不是针对Metric，而是因为一切都被Metric所掩盖，所以不需要。

BMI计算仍然不正确，因为它显示了我的38万个数字。

相关问题
最新问题