2014-02-11 669 views
0

我想创建一个基本的HTML/JavaScript BMI计算器。基本BMI计算器HTML/Javascript

应该在下面显示一条消息: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> 

+0

请创建一个小提琴请 – tewathia

回答

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属性来这里设定的范围内的文本。如果它是一个文本字段,而不是跨

+0

请提供解释。 – Dropout

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> 

这应该工作

.value的正常工作。你所做的事情不对,是var output没有分配任何值。和document.getElementById("comment")导致一个空集(空),因此错误:Cannot set property value of null。我不明白你想通过document.getElementById("answer").value = output声明完成什么,所以除非你解释,我已经评论过它。

0

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

在这一点上你的公式是体重/(身高^ 2)

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

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

我建议你按下你的答案'编辑',并添加一些更多的信息:) – MeanGreen

+0

你知道我差点忘了:D –