JavaScript math is not working and need help highlighting text

Question

I am trying to write a program to calculate BMI. I would also like to have the script highlight the corresponding answer in my table. My math is not working correctly. The BMI calculation is putting out an incorrect answer even though the formula is correct.

I also cannot figure out how to highlight the text in the table.

<!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>

Possible duplicate of [To the Power Of](https://stackoverflow.com/questions/22145709/to-the-power-of) — Sebastian Simon, Jun 23 '18 at 00:59

Jake Miller · Accepted Answer · 2018-06-23T01:03:52.937

^ is a bitwise operator and not how you calculate exponential values in most languages, JavaScript included.

Change BMI = ((Weight*703)/Height^2); to BMI = ((Weight*703)/Math.pow(Height, 2));

As for highlighting the row corresponding with the calculated BMI, you need to add an ID to the table and select it with document.getElementById. Then, use comparative statements to see which row needs to be highlighted (for example, if BMI < 18.5, then highlight the the "underweight" row). Here's a working example below.

<!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>

Thank you, it is working now. Do you have any advice on how I could possibly highlight my answer in the table? — itstudent101, Jun 23 '18 at 00:53
Or just "height * height" which seems simpler since there's nothing complicated here. — Dave Newton, Jun 23 '18 at 00:55

aholmes · Answer 2 · 2018-06-23T01:00:24.437

In addition to Jake Miller's correct answer, you may also want to be informed of this neat gotcha that makes element IDs global variables. This is not the cause of the problem you're experiencing, but it can easily cause problems.

For Height and Weight, you re-declared the variables in your local scope, so the global variables will be unaffected. However, these lines do the exact same thing.

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

You might also like to know that declaring Height and Weight twice is unnecessary.

For highlighting, there are several ways you could accomplish this. One option is to simply set the background color for the element containing the text. Another option, if you're going for a "cursor-selected"-like highlight, would be using the Selection or Range APIs. There are also options in jQuery, and other libraries for this exact purpose.

JavaScript math is not working and need help highlighting text

2 Answers2