基于单选按钮的Js计算，以及一些问题[关闭]

Question

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

✓ 1. 我按照推荐添加了var ActivityLevel = document.querySelector ('input [name =" radiant "]: checked'). Value; 。现在计算按我的预期工作，即 bmr * SelectedValue。

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

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

项目：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

1. 您可以使用querySelector 在Activity Level 组中找到选中的单选按钮并获取其值：

   var ActivityLevelRadioSelect = document.querySelector('input[name="radiosa"]:checked').value;
   

2. 同样，您可以在“性”组中查询选中的单选按钮。此变量将根据您在<input>s 中输入的值设置为'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>s 对应的 <label>s 移动到 <div>s 本身，以便它们也可以显示/隐藏。）
3. 对于<input type="number">，您可以使用min 和max 属性设置允许的范围。请注意，这不会阻止用户键入范围之外的值。但是，它确实将向上/向下按钮限制在范围内，并且如果键入了超出范围的数字，则会将该字段标记为无效。例如，在高度字段中：

   <input type="number" class="mts-field" min="1" max="999" id="height" name="height1" placeholder="es: 170cm"/>
   

4. 对于一个简单的平均值，只需将三个值相加，除以三，然后四舍五入。例如，对于 BMR：

   var bmr_mean = Math.round((bmr_mifflin + bmr_klatch + bmr_cunningham) / 3);