问基本BMI计算器HTML/Javascript
EN

Stack Overflow用户

提问于 2014-02-11 17:37:18

回答 5查看 81K关注 0票数 2

我正在尝试创建一个基本的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>

javascript

html

回答 5

Stack Overflow用户

发布于 2015-08-10 20:41:47

嗨，我忘了说: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>

票数 2

Stack Overflow用户

发布于 2014-02-11 18:00:36

我对你的代码做了一些修改..

检查它是否对你有效。

祝好运

<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

您不能使用like innerHTML使用相同的like document.getElementById("comment").innerHTML = "Underweight"; // document.getElementById("comment").value = "Underweight";属性来设置跨度的内部文本。

如果是文本字段，则.value将起作用，但不适用于span

票数 1

Stack Overflow用户

发布于 2014-02-11 18:10:45

 <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语句来实现什么，所以除非你解释一下，否则我已经对它进行了注释。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21698044

复制

相似问题

问基本BMI计算器HTML/Javascript
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基本BMI计算器HTML/JavascriptEN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基本BMI计算器HTML/Javascript
EN