javascript - 如何使用 JavaScript 创建 BMI 计算器，并提供以公斤/米为单位的 BMI 或以磅/英尺为单位的 BMI 之间进行选择的选项

Question

大家好，

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

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

请注意，用于磅的公式是:

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

如果我理解您所需要的只是访问 radio 值，对吗？

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>