Skip to main content
Feb 26, 2017 11:56 PM UTC
Question

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

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 is closed to new replies. Start a new post to keep the conversation going.

3 replies

Participant
Sep 5, 2023 7:32 PM UTC

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>
Translate
Thom Parker
Community Expert
Community Expert
Sep 5, 2023 7:50 PM UTC

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

Is this topic somehow related to Acrobat or PDF?

 

Translate
Thom Parker - Software Developer at PDFScriptingUse the Acrobat JavaScript Reference early and often
try67
Community Expert
Community Expert
Feb 27, 2017 12:09 AM UTC

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.

Translate