堆栈内存溢出
  繁体   English   中英

基本 BMI 计算器 HTML/Javascript

[英]Basic BMI Calculator HTML/Javascript

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

问题描述

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

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

请有人帮我修理我的计算器，我知道我的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 个解决方案

解决方案1
 2  2015-08-10 12: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
 1  2014-02-11 10:00:35

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

检查它是否适合您。

祝你好运

<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 document.getElementById("comment").value = "Underweight"; 使用相同的像document.getElementById("comment").innerHTML = "Underweight"; //innerHTML 属性用于在这里设置span的内部文本。

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

解决方案3
 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>

这应该有效。 你所做的事情有问题，是 var output没有分配任何值。 和document.getElementById("comment")导致空集（null），因此错误： Cannot set property value of null 。 而且我不明白您希望通过语句document.getElementById("answer").value = output因此除非您对此进行解释，否则我已对其进行了评论。

解决方案4
 1  2014-04-15 07:32:27

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

此时你的公式是体重/（身高^ 2）

应该是体重/(身高^2)*703

解决方案5
 0  2020-08-16 19:56:11

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

那是针对英语而不是针对公制的，但鉴于所有内容都已转换为公制，因此不需要。

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 BMI计算器 JavaScript 如何为 BMI_Calculator.html 编写 javascript 代码？ Javascript BMI计算器指针位置 Javascript BMI计算器在IE中不起作用 使用 javascript 在我的网站上创建一个 bmi 计算器 以公制四舍五入 JavaScript BMI 计算器的结果编号 如何在HTML和Javascript中实现基本计算器 如何使用 JavaScript 创建 BMI 计算器，可选择以公斤/米为单位的 BMI 或以磅/英尺为单位的 BMI 制作基本的Javascript计算器 基本的JavaScript计算器
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM