How to create a BMI calculator using JavaScript with options to choose between BMI in Kgs/metters or BMI in Lbs/feet

Question

Good day all,

I am currently coding BMI calculator for my project. The calculator is already set to work in Lbs/feet, but I would like to add an option where I can be able to choose between Kgs/meters or Lbs/feet.

I have created the html code for it and just need the JavaScript part of it to make it work.

Please note that the formula being used for Lbs is:

((mass / 2.2046) / ((height/3.28) * (height/3.28))).toFixed(2)

And if I wanted to calculate the BMI in Kgs / meters, for formula would be:

(mass / (height * height)).toFixed(2)

Please see below what I have done so far: Your help is always appreciated. Thanks in advance.

 // BMI Calculator const myForm = document.getElementById('my-form'); myForm.oninput = () => { myForm.result.value = bmiCalculator(myForm.height.value, myForm.mass.value); function bmiCalculator(height, mass) { return ((mass / 2.2046) / ((height/3.28) * (height/3.28))).toFixed(2) } }

 fieldset { margin-top: 1em; } label { display: inline-block; width: 10em; text-align: left; } input { font-size: .9em; text-align: left; display: inline-block; width: 10em; } output::before { content: ''; } output { font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right; } append { display: inline-block; width: 10em; text-align: center; }

 <h2>Body Mass Index Calculator</h2> <,-- Used oninput to display the results instantly--> <:-- If I wanted to calculate the result on a click: I would use onsubmit--> <form action="" oninput="return mySubmitFunction(event)" id="my-form"> <fieldset> <legend>Please Choose which BMI you would like to use:</legend> <append>BMI in Kgs / Meters <input type="radio" name="bmi" value="bmiInKgs"></append> <append>BMI in Lbs / Feet <input type="radio" name="bmi" value="bmiInLbs"></append> </fieldset> <fieldset> <fieldset> <legend><b>Calculate Your BMI:</b></legend> <br> <label>Height in Feet: <input type="number" id="height" name="height" step=any min=0></label> <label>Mass / Weight in lbs: <input type="number" id="mass" class="mass" step=any min=0></label> </fieldset> <fieldset><br> <legend><b>BMI Result :</b></legend> <output id="result" name="result" value='0'></output> <br><br> <button type="reset">Reset Calculator!</button> </fieldset></fieldset> </form>

Answer 1

If I understand all you need is to access the radio value, correct?

if (myForm.bmi.value == "bmiInKgs")
  // Calculate Kg
else {
  // Calculate Lbs
} 

 // BMI Calculator const myForm = document.getElementById('my-form'); myForm.oninput = () => { if (myForm.bmi.value == "bmiInKgs") { myForm.result.value = bmiCalculator(myForm.height.value, myForm.mass.value); } else { myForm.result.value = bmiCalculator(myForm.height.value/3.28, myForm.mass.value/2.2046); } function bmiCalculator(height, mass) { return (mass / (height * height)).toFixed(2) } }

 fieldset { margin-top: 1em; } label { display: inline-block; width: 10em; text-align: left; } input { font-size: .9em; text-align: left; display: inline-block; width: 10em; } output::before { content: ''; } output { font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right; } append { display: inline-block; width: 10em; text-align: center; }

 <h2>Body Mass Index Calculator</h2> <!-- Used oninput to display the results instantly--> <!-- If I wanted to calculate the result on a click, I would use onsubmit--> <form action="" oninput="return mySubmitFunction(event)" id="my-form"> <fieldset> <legend>Please Choose which BMI you would like to use :</legend> <append>BMI in Kgs / Meters <input type="radio" name="bmi" value="bmiInKgs" checked="checked"></append> <append>BMI in Lbs / Feet <input type="radio" name="bmi" value="bmiInLbs"></append> </fieldset> <fieldset> <fieldset> <legend><b>Calculate Your BMI :</b></legend> <br> <label>Height: <input type="number" id="height" name="height" step=any min=0></label> <label>Mass / Weight: <input type="number" id="mass" class="mass" step=any min=0></label> </fieldset> <fieldset><br> <legend><b>BMI Result :</b></legend> <output id="result" name="result" value='0'></output> <br><br> <button type="reset">Reset Calculator!</button> </fieldset></fieldset> </form>

Answer 2

 // BMI Calculator const myForm = document.getElementById('my-form'); myForm.oninput = () => { if (myForm.bmi.value == "bmiInKgs") { myForm.result.value = bmiCalculator(myForm.height.value, myForm.mass.value); } else { myForm.result.value = bmiCalculator(myForm.height.value/3.28, myForm.mass.value/2.2046); } function bmiCalculator(height, mass) { return (mass / (height * height)).toFixed(2) } }

 fieldset { margin-top: 1em; } label { display: inline-block; width: 10em; text-align: left; } input { font-size: .9em; text-align: left; display: inline-block; width: 10em; } output::before { content: ''; } output { font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right; } append { display: inline-block; width: 10em; text-align: center; }

 <h2>Body Mass Index Calculator</h2> <,-- Used oninput to display the results instantly--> <:-- If I wanted to calculate the result on a click: I would use onsubmit--> <form action="" oninput="return mySubmitFunction(event)" id="my-form"> <fieldset> <legend>Please Choose which BMI you would like to use:</legend> <append>BMI in Kgs / Meters <input type="radio" name="bmi" value="bmiInKgs" checked="checked"></append> <append>BMI in Lbs / Feet <input type="radio" name="bmi" value="bmiInLbs"></append> </fieldset> <fieldset> <fieldset> <legend><b>Calculate Your BMI:</b></legend> <br> <label>Height: <input type="number" id="height" name="height" step=any min=0></label> <label>Mass / Weight: <input type="number" id="mass" class="mass" step=any min=0></label> </fieldset> <fieldset><br> <legend><b>BMI Result :</b></legend> <output id="result" name="result" value='0'></output> <br><br> <button type="reset">Reset Calculator!</button> </fieldset></fieldset> </form>