Question

我正在尝试编写一个计算BMI的程序。我还希望脚本在表中突出显示相应的答案。我的数学无法正常工作。即使公式正确，BMI计算仍会给出错误的答案。

我也不知道如何突出显示表格中的文本。

<!DOCTYPE html>
<html>
<head>
    <title>BMI Calculator</title>

    <script type="text/javascript">
    function calculateBMI(){
    
    var Height = parseFloat(document.getElementById("Height").value);
    var Weight = parseFloat(document.getElementById("Weight").value);    
   
    
    var Height;
    var Weight;
 

    BMI = ((Weight*703)/Height^2);
  

    document.getElementById("BMI").value = BMI;


    }
    </script>

</head>
<body>
    <h1>BMI Calculator</h1>
    <p>To use, please input the height and weight and press calculate<p>
        <form name="BMICalculator">
        
        Height:
        <input type = "text" id="Height" name="Height" value="" />inches<br />
        Weight
        <input type = "text" id="Weight" name="Weight" value="" />lbs<br />
        

        
        <input type = "button" id="calculate" name="Calculate" value="Calculate" onclick="calculateBMI();" /> 

        <input type = "reset" id="Reset" name="Reset" value="Reset" /><br />


        <br>

        BMI:
        <input type = "text" id="BMI" name="BMI" value="" /><br />
        </form>

        <br>

        <table style="width:100%", border="1px solid black">
            <tr>
              <td>Underweight</td>
              <td><18.5</td> 
            </tr>
            <tr>
              <td>Normal weight</td>
              <td>18.5 - 24.9</td> 
            </tr>
            <tr>
              <td>Overweight</td>
              <td>25 - 29.9</td> 
            </tr>
            <tr>
                <td>Obesity</td>
                <td>30 or more</td>
            </tr>
        </table>
    </body>
    </html>

Answer 1

^是按位运算符，不是大多数语言（包括JavaScript）如何计算指数值的方式。

将BMI = ((Weight*703)/Height^2);更改为BMI = ((Weight*703)/Math.pow(Height, 2));

要突出显示与计算出的BMI对应的行，您需要在表中添加一个ID，然后使用document.getElementById将其选中。然后，使用比较性语句查看需要突出显示的行（例如，如果BMI <18.5，则突出显示“轻量”行）。这是下面的工作示例。

<!DOCTYPE html>
<html>
  <head>
    <title>BMI Calculator</title>
    <style>
      .yellow {
        background: yellow;
      }
    </style>
    <script type="text/javascript">
      function calculateBMI(){
        var Height = parseFloat(document.getElementById("Height").value);
        var Weight = parseFloat(document.getElementById("Weight").value);    

        var BMI = ((Weight*703)/Math.pow(Height, 2));
				
        highlightWeightClass(BMI);
        
        document.getElementById("BMI").value = BMI;
      }
      
      // Checks to see if a row needs to have the "yellow" class for 
      // highlighting or no class to remain white
      function highlightWeightClass(bmi) {
        var rows = document.getElementById("BMITable").rows;
        rows[0].className = bmi < 18.5 ? "yellow" : "";
        rows[1].className = bmi >= 18.5 && bmi < 25 ? "yellow" : "";
        rows[2].className = bmi >= 25 && bmi < 30 ? "yellow" : "";
        rows[3].className = bmi > 30 ? "yellow" : "";
      }
    </script>

  </head>
  <body>
    <h1>BMI Calculator</h1>
    <p>To use, please input the height and weight and press calculate<p>
    <form name="BMICalculator">

      Height:
      <input type = "text" id="Height" name="Height" value="" />inches<br />
      Weight:
      <input type = "text" id="Weight" name="Weight" value="" />lbs<br />



      <input type = "button" id="calculate" name="Calculate" value="Calculate" onclick="calculateBMI();" /> 

      <input type = "reset" id="Reset" name="Reset" value="Reset" /><br />


      <br>

      BMI:
      <input type = "text" id="BMI" name="BMI" value="" /><br />
    </form>

    <br>

    <table id="BMITable" style="width:100%", border="1px solid black">
      <tr>
        <td>Underweight</td>
        <td>18.5</td> 
      </tr>
      <tr>
        <td>Normal weight</td>
        <td>18.5 - 24.9</td> 
      </tr>
      <tr>
        <td>Overweight</td>
        <td>25 - 29.9</td> 
      </tr>
      <tr>
        <td>Obesity</td>
        <td>30 or more</td>
      </tr>
    </table>
  </body>
</html>

Answer 2

除了杰克·米勒（Jake Miller）的正确答案外，您可能还希望了解使元素ID成为全局变量的this neat gotcha。这不是您遇到问题的原因，但是很容易引起问题。

对于“身高和体重”，您在局部范围内重新声明了变量，因此全局变量将不受影响。但是，这些行的作用完全相同。

BMI = ((Weight*703)/Height^2);
document.getElementById("BMI").value = BMI;

您可能还想知道，不必两次声明身高和体重。

要突出显示，有几种方法可以完成此操作。一种选择是简单地为包含文本的元素设置背景色。如果要使用类似“光标选择”的突出显示，另一种选择是使用Selection或Range API。 jQuery和其他库中也有用于此特定目的的选项。

JavaScript数学无法正常工作，需要帮助突出显示文本

2 个答案:

JavaScript数学无法正常工作，需要帮​​助突出显示文本

2 个答案:

JavaScript数学无法正常工作，需要帮助突出显示文本