基于单选按钮的计算，以及一些问题

Question

我正在为要放在我的网站上的计算器而苦苦挣扎。我是粉丝，没有编程技能。在这里我罗列一下我遇到的问题，希望有好心人能帮我解决我遇到的问题。

前提：我在表单标签之外工作，因为元素将放置在页面的不同区域。

我遇到的第一个问题是：我不知道如何计算bmr * Activity Level Radio Selected fields 通过乘以 BMR * ActivityLevel，我应该得到一个名为 TDEE 的新值。这是乘以 BMR * 选择值的结果。
第二个问题是：对于 Mifflin St Jeor 公式（BMR 和 TDEE），我想根据用户选择的性别显示结果。如果男人只显示 BMR 和 TDEE Man，如果女人只显示 BMR 和 TDEE Woman。这仅适用于 Mifflint St Jeor 公式，因为其他公式不需要选择性别。
第三个问题：如何限制字体的选择？我想在某些字段中限制输入 2 个或最多 3 个字符（仅限数字）。我尝试使用 maxlength，但输入类型编号不接受 maxlength。
第四个也是最后一个问题是：最后我想添加两个字段来计算所获得结果的平均值。 BMR 平均值的字段和 TDEE 平均值的字段。但是我不知道实现这个的功能。

项目：https://jsfiddle.net/snake93/89wtnxj4/208/

感谢大家的回答

<label class="mts-label">Peso</label>
<input  type="number" step="any" class="mts-field" maxlength="4" id="weight" name"weight1" placeholder="es: 70Kg"/>

<label class="mts-label">Altezza</label>
<input  type="number" class="mts-field" maxlength="4" id="height" name"height1" placeholder="es: 170cm"/>

<label class="mts-label">Età</label>
<input  type="number" class="mts-field" maxlength="2" id="age" name"age1" placeholder="es: 25 anni"/>

<label class="mts-label">Bodyfat in %</label>
<input  type="number" class="mts-field" maxlength="2" id="bodyfat" name"bodyfat1" placeholder="es: 15%"/>

<div class="mts-label">Sesso</div>

<!--Radio Button Sex-->
  <div class="mts-radio-button">
    <input type="radio" id="sexuomo" name="radios" value="Male">
    <label class="mts-label-radio" for="sexuomo">Uomo</label>
  </div>

  <div class="mts-radio-button1">
    <input type="radio" id="sexdonna" name="radios" value="Female">
    <label class="mts-label-radio" for="sexdonna">Donna</label>
  </div>
  
  <!--Radio Activity Level-->
  <br>
 
  <label class="mts-label">Attività lavorativa</label>
  <div class="mts-radio-button">
    <input type="radio" id="leggero" name="radiosa" value="1.2">
    <label class="mts-label-radio" for="leggero">Leggero</label>
  </div>
  
   <div class="mts-radio-button">
    <input type="radio" id="attivo" name="radiosa" value="1.375">
    <label class="mts-label-radio" for="attivo">Attivo</label>
  </div>
  
  <div class="mts-radio-button">
    <input type="radio" id="allenato" name="radiosa" value="1.55">
    <label class="mts-label-radio" for="allenato">Allenato</label>
  </div>
  
  <div class="mts-radio-button">
    <input type="radio" id="Mattivo" name="radiosa" value="1.75">
    <label class="mts-label-radio" for="Mattivo">Molto Attivo</label>
  </div>
  
  <div class="mts-radio-button">
    <input type="radio" id="Eattivo" name="radiosa" value="1.9">
    <label class="mts-label-radio" for="Eattivo">Estremamente Attivo</label>
  </div>

<!---BMR Mifflin StJeor Result Field--->
<br>
<label class="mts-label">BMR Mifflin St Jeor for Male Formula</label>
<div id="bmr-sexuomo">
<input  type="text" class="mts-field" id="bmr_mifflin_man" name="bmr_mifflin_man"
placeholder="0.000,0 Kcal" min="1" readonly/>
</div>

<br>
<label class="mts-label">BMR Mifflin St Jeor for Female Formula</label>
<div id="bmr-sexdonna">
<input  type="text" class="mts-field" id="bmr_mifflin_woman" name="bmr_mifflin_woman"
placeholder="0.000,0 Kcal" min="1" readonly/>
</div>

<!---TDEE Mifflin StJeor Result Field--->
<br>
<label class="mts-label">TDEE Mifflin St Jeor for Male Formula</label>
<div id="MifflinMale"> 
<input  type="text" class="mts-field" id="tdee_mifflin_man" name="tdee_mifflin_man"
placeholder="0.000,0 Kcal Uomo" min="1" readonly/>
</div>

<br>
<label class="mts-label">TDEE Mifflin St Jeor for Female Formula</label>
<div id="MifflinFemale"> 
<input  type="text" class="mts-field" id="tdee_mifflin_woman" name="tdee_mifflin_woman"
placeholder="0.000,0 Kcal donna" min="1" readonly/>
</div>

<!---BMR Katch McArdle Formula--->
<br>
<label class="mts-label">BMR Katch McArdle Formula</label>
<div id="Ktch"> 
<input  type="text" class="mts-field" id="bmr_katch" name="bmr_katch"
placeholder="0.000,0 Kcal" maxlength="6" readonly/>
</div>

<!---TDEE Katch McArdle Formula--->
<br>
<label class="mts-label">TDEE Katch McArdle Formula</label>
<div id="Ktch"> 
<input  type="text" class="mts-field" id="tdee_katch" name="tdee_katch"
placeholder="0.000,0 Kcal" maxlength="6" readonly/>
</div>

<!---BMR Cunningham Formula--->
<br>
<label class="mts-label">BMR Cunningham Formula</label>
<div id="Cunningham"> 
<input  type="text" class="mts-field" id="bmr_cunningham" name="bmr_cunningham"
placeholder="0.000,0 Kcal CUomo" maxlength="6" readonly/>
</div>

<!---TDEE Cunningham Formula--->
<br>
<label class="mts-label">TDEE Cunningham Formula</label>
<div id="Cunningham"> 
<input  type="text" class="mts-field" id="tdee_cunningham" name="tdee_cunningham"
placeholder="0.000,0 Kcal" maxlength="6" readonly/>
</div>

<!---Calc & Reset Button--->
<br>
<button name="calculate" onclick="calculate()">Calcola</button>
<button id="reset" onclick="resetFields()">Reset</button>

// Calc-Function
calculate = function()
{
    var weight = document.getElementById('weight').value;
    var height = document.getElementById('height').value;
    var age = document.getElementById('age').value;
    var bodyfat = document.getElementById('bodyfat').value / 100;

 //Result BMR Mifflint St Jeor Formula
    var bmr_mifflin_man = parseFloat(10*weight) + (6.25*height) - (5*age) + 5;
    var bmr_mifflin_woman = parseFloat(10*weight) + (6.25*height) - (5*age) - 161;
document.getElementById('bmr_mifflin_man').value = bmr_mifflin_man.toLocaleString('it-IT'); + " Kcal"
document.getElementById('bmr_mifflin_woman').value = bmr_mifflin_woman.toLocaleString('it-IT'); + " Kcal"

//Result TDEE Mifflint St Jeor Formula
    var tdee_mifflin_man = parseFloat(bmr_mifflin_man*ActivityLevelRadioSelect );
    var tdee_mifflin_woman = parseFloat(bmr_mifflin_woman*ActivityLevelRadioSelect );
document.getElementById('tdee_mifflin_man').value = tdee_mifflin_man.toLocaleString('it-IT'); + " Kcal"
document.getElementById('tdee_mifflin_woman').value = tdee_mifflin_woman.toLocaleString('it-IT'); + " Kcal"

 //Result BMR Katch Mc Ardle Formula
    var bmr_katch = parseFloat(370 + ( 21.6 * ( weight * ( 1 - bodyfat )))); 
document.getElementById('bmr_katch').value = bmr_katch.toLocaleString('it-IT'); + " Kcal"

//Result TDEE Katch Mc Ardle Formula
    var tdee_katch = parseFloat(bmr_katch*ActivityLevelRadioSelect ); 
document.getElementById('tdee_katch').value = bmr_katch.toLocaleString('it-IT'); + " Kcal"

//Result BMR Cunningham Formula
    var bmr_cunningham = parseFloat(500 + ( 22 * ( weight * ( 1 - bodyfat )))); 
document.getElementById('bmr_cunningham').value = bmr_cunningham + " Kcal"

//Result TDEE Cunningham Formula
    var tdee_cunningham = parseFloat(bmr_cunningham*ActivityLevelRadioSelect ); 
document.getElementById('tdee_cunningham').value = bmr_cunningham + " Kcal"

//This is Activity Level Radio Selection//
 var leggero = document.getElementById('leggero').value * 1.2;
 var attivo = document.getElementById('attivo').value * 1.375;
 var allenato = document.getElementById('allenato').value * 1.55;
 var Mattivo = document.getElementById('Mattivo').value * 1.75;
 var Eattivo = document.getElementById('Eattivo').value * 1.9;
 
}

//Reset Function
function resetFields(){
    var inputArray = document.querySelectorAll('input');
    inputArray.forEach(function (input){
        input.value = "";
    });
}

Answer 1

您可以使用querySelector在Activity级别组中找到选中的单选按钮并获取其值：
```
var ActivityLevelRadioSelect = document.querySelector('input[name="radiosa"]:checked').value;
```

同样，您可以在性别组中查询选中的单选按钮。该变量将根据您在 <input> 中输入的值设置为 'Male' 或 'Female'，因此在决定要显示哪些字段时检查这些值：

var sex = document.querySelector('input[name="radios"]:checked').value;
document.getElementById('bmr-sexuomo').hidden = sex !== 'Male';
document.getElementById('bmr-sexdonna').hidden = sex !== 'Female';
document.getElementById('MifflinMale').hidden = sex !== 'Male';
document.getElementById('MifflinFemale').hidden = sex !== 'Female';

（您需要将对应于这四个 <div> 的 <label> 移动到 <div> 本身，以便它们也可以是 shown/hidden。）

对于 <input type="number">，您可以使用 min 和 max 属性设置允许的范围。请注意，这不会阻止用户键入超出范围的值。但是，它确实将 up/down 按钮限制在范围内，并且如果键入超出范围的数字，会将字段标记为无效。例如，在“高度”字段中：
```
<input type="number" class="mts-field" min="1" max="999" id="height" name="height1" placeholder="es: 170cm"/>
```
对于简单的平均值，只需将三个值相加，除以三，然后四舍五入。例如，对于 BMR：
```
var bmr_mean = Math.round((bmr_mifflin + bmr_klatch + bmr_cunningham) / 3);
```

基于单选按钮的计算，以及一些问题

Calculation based on radio button, and some problems

html

javascript

jquery

calculator

conditional-statements