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

如何解决基于单选按钮的js计算，以及一些问题

感谢@kdau 的干预，我解决了列出的问题。

✓ 1. 我按照建议添加了 var ActivityLevel = document.querySelector ('input [name =" radiant "]: checked'). Value; 。现在计算如我所料，即 bmr * SelectedValue。

✓ 2. 提供的建议非常有效，但我希望字段开始隐藏。正如评论中所建议的，我将 hidden 添加到 html div 中，这很好。

✓ 3. 不知道是什么原因，但是min - max 解决方案不起作用，所以我用oninput =" javascript: if (this.value.length> this.maxLength) this.value = this .value.slice (0,this .maxLength); "解决了这个问题，我将直接限制字符数而不是设置值限制。

项目：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 = "";
    });
}

解决方法

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

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

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';

（您需要将与这四个 <label> 对应的 <div> 移动到 <div> 本身中，以便它们也可以显示/隐藏。）

对于 <input type="number">，您可以使用 min 和 max 属性设置允许的范围。请注意，这不会阻止用户键入范围之外的值。但是，它确实将向上/向下按钮限制在范围内，并且如果键入的数字超出范围，则会将该字段标记为无效。例如，在高度字段中：
```
<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);
```