堆栈内存溢出
  简体   繁体   English

基本 BMI 计算器 HTML/Javascript

[英]Basic BMI Calculator HTML/Javascript

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

问题描述

I am trying to create a basic HTML/JavaScript BMI calculator.我正在尝试创建一个基本的 HTML/JavaScript BMI 计算器。

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.下面应该显示一条消息： your bmi is: ，然后下面的消息是this means you are:根据上面计算的 BMI。

Please can someone help me fix my calculator, I know there are problems with my if statements?请有人帮我修理我的计算器，我知道我的if语句有问题吗？ 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 个解决方案

解决方案1
 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嗨，我忘了说 :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

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这是我的小提琴JSFIDDLE

You cannot use like document.getElementById("comment").value = "Underweight";您不能使用 like document.getElementById("comment").value = "Underweight"; Use the same like document.getElementById("comment").innerHTML = "Underweight";使用相同的像document.getElementById("comment").innerHTML = "Underweight"; //innerHTML property is used to set the inner text of the span here. //innerHTML 属性用于在这里设置span的内部文本。

.value will work if it is a text field but not for 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>

This should work.这应该有效。 The things wrong with what you have done , is that the var output is not assigned any value.你所做的事情有问题，是 var output没有分配任何值。 and document.getElementById("comment") results in an empty set(null), hence the error : Cannot set property value of null .和document.getElementById("comment")导致空集（null），因此错误： 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.而且我不明白您希望通过语句document.getElementById("answer").value = output因此除非您对此进行解释，否则我已对其进行了评论。

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

I am not sure your formula is correct.我不确定你的公式是否正确。

At this point your formula is Weight/(height^2)此时你的公式是体重/（身高^ 2）

It should be Weight/(height^2)*703应该是体重/(身高^2)*703

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

"It should be Weight/(height^2)*703" “应该是体重/（身高^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. BMI 计算仍然不正确，因为它显示我的为 38 万中的某个数字。

暂无
暂无

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

相关问题 BMI计算器 JavaScript - BMI Calculator JavaScript 如何为 BMI_Calculator.html 编写 javascript 代码？ - How to write javascript code for BMI_Calculator.html? Javascript BMI计算器指针位置 - Javascript bmi calculator pointer position Javascript BMI计算器在IE中不起作用 - Javascript BMI calculator doesn't work in IE 使用 javascript 在我的网站上创建一个 bmi 计算器 - To create a bmi calculator on my website using javascript 以公制四舍五入 JavaScript BMI 计算器的结果编号 - Round a result number for JavaScript BMI calculator in metric 如何在HTML和Javascript中实现基本计算器 - How to implement basic calculator in HTML & Javascript 如何使用 JavaScript 创建 BMI 计算器，可选择以公斤/米为单位的 BMI 或以磅/英尺为单位的 BMI - How to create a BMI calculator using JavaScript with options to choose between BMI in Kgs/metters or BMI in Lbs/feet 制作基本的Javascript计算器 - Making a basic Javascript calculator 基本的JavaScript计算器 - Basic JavaScript Calculator
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM