Skip to main content
A
Anonymous
February 26, 2017
Question

How to add gender and age variables to my BMI calculation?

  • February 26, 2017
  • 2 replies
  • 2243 views

I'm trying to build a calculator that works out the users BMI.

I've managed to get this far at the moment, however I would like to add the users age and gender to the calculation.

<!DOCTYPE html>

<html>

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

        if (heightunits=="cm") height/=100;

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

        <option value="cm">cm</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 topic has been closed for replies.

2 replies

H
Hum Tum Youtu32093311u88h
Participant
September 5, 2023

Here is complete code of Bmi calculator 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced BMI Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .container {
            max-width: 400px;
            margin: 0 auto;
            text-align: center;
            padding: 20px;
        }

        h1 {
            color: #333;
        }

        input[type="number"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
        }

        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        #result {
            font-weight: bold;
            font-size: 18px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1><a href="https://newbmicalculator.online/">Advanced BMI Calculator</h1></a>
        <label for="weight">Weight (kg):</label>
        <input type="number" id="weight" placeholder="Enter your weight" step="0.01" required>
        <label for="height">Height (cm):</label>
        <input type="number" id="height" placeholder="Enter your height" step="0.01" required>
        <button onclick="calculateBMI()">Calculate BMI</button>
        <div id="result"></div>
    </div>

    <script>
        function calculateBMI() {
            const weight = parseFloat(document.getElementById('weight').value);
            const height = parseFloat(document.getElementById('height').value) / 100; // Convert to meters

            if (!isNaN(weight) && !isNaN(height) && height > 0) {
                const bmi = weight / (height * height);
                const bmiCategory = getBMICategory(bmi);

                document.getElementById('result').innerHTML = `Your BMI is: ${bmi.toFixed(2)} (${bmiCategory})`;
            } else {
                document.getElementById('result').innerHTML = 'Please enter valid weight and height values.';
            }
        }

        function getBMICategory(bmi) {
            if (bmi < 18.5) {
                return 'Underweight';
            } else if (bmi < 24.9) {
                return 'Normal Weight';
            } else if (bmi < 29.9) {
                return 'Overweight';
            } else {
                return 'Obese';
            }
        }
    </script>
</body>

</html>
Thom Parker
Community Expert
Thom ParkerCommunity Expert
Community Expert
September 5, 2023

As try67 pointed out. This forum is not about HTML, it's about Adobe Acrobat. 

Is this topic somehow related to Acrobat or PDF?

 

Thom Parker - Software Developer at PDFScriptingUse the Acrobat JavaScript Reference early and often
try67
Community Expert
try67Community Expert
Community Expert
February 27, 2017

This forum is about JavaScript in PDF files, not web-pages...

However, it shouldn't be too difficult. Just do the same thing you did with the weight and height input.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices