如何使用 JavaScript 创建 BMI 计算器，可选择以公斤/米为单位的 BMI 或以磅/英尺为单位的 BMI

Question

大家好，

我目前正在为我的项目编写 BMI 计算器。 计算器已经设置为以磅/英尺为单位工作，但我想添加一个选项，让我可以在公斤/米或磅/英尺之间进行选择。

我已经为它创建了 html 代码，只需要它的 JavaScript 部分即可使其工作。

请注意，用于 Lbs 的公式是：

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

如果我想以公斤/米为单位计算 BMI，公式为：

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

请看下面我到目前为止所做的事情：我们总是感谢您的帮助。 提前致谢。

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