不计算字段是否为空(Js 计算器)

Don't calculate if a field is empty (Js calculator)

我试图仅在字段为空时限制计算。我有很多其他字段同时计算,我想限制计算只计算未填写的字段。

我不太了解 JS,所以我希望能够在这里找到帮助...感谢您的任何回答,我在下面留下更多信息。

基本上一切正常。但是,当体脂字段为空时,将执行 BMR 和 TDEE Katch McArdle 和 Cunningham 公式的计算。

我想做的是仅当 Bodyfat 字段包含值时才计算 McArdle 和 Cunningham 公式字段。

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;
    var select_lvl = document.querySelector('#a_level option:checked').value; 
    
//Sex Selection Hide-Show Div// 

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';
    
var bmr_mifflin_man = (10*weight) + (6.25*height) - (5*age) + 5;
document.getElementById('bmr_mifflin_man').value = bmr_mifflin_man.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";

var tdee_mifflin_man = (bmr_mifflin_man*select_lvl);
document.getElementById('tdee_mifflin_man').value = tdee_mifflin_man.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";

var bmr_mifflin_woman = (10*weight) + (6.25*height) - (5*age) - 161;
document.getElementById('bmr_mifflin_woman').value = bmr_mifflin_woman.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";

var tdee_mifflin_woman = (bmr_mifflin_woman*select_lvl);
document.getElementById('tdee_mifflin_woman').value = tdee_mifflin_woman.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";


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

//Result TDEE Katch Mc Ardle Formula
    var tdee_katch = (bmr_katch*select_lvl); 
document.getElementById('tdee_katch').value = bmr_katch.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";

//Result BMR Cunningham Formula
    var bmr_cunningham = (500 + ( 22 * ( weight * ( 1 - bodyfat )))); 
document.getElementById('bmr_cunningham').value = bmr_cunningham.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";

//Result TDEE Cunningham Formula
    var tdee_cunningham = (bmr_cunningham*select_lvl); 
document.getElementById('tdee_cunningham').value = bmr_cunningham.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";

//This is Activity Level Radio Selection//
 var leggeros = document.getElementById('leggeros').value * 1.2;
 var attivos = document.getElementById('attivos').value * 1.375;
 var allenatos = document.getElementById('allenatos').value * 1.55;
 var Mattivos = document.getElementById('Mattivos').value * 1.75;
 var Eattivos = document.getElementById('Eattivos').value * 1.9;

}

//Reset Function
function resetFields() {

document.getElementById("bmrcalc").reset();  
document.getElementById('bmr_katch').value = ''
document.getElementById('bmr_mifflin_man').value = ''

var ele = document.getElementsByName("radiosa");
   for(var i=0;i<ele.length;i++)
      ele[i].checked = false;
      
}

https://jsfiddle.net/snake93/4n9dgbfw/3/

我已经添加了一个 if 条件来检查 body fat 现在它可以正常工作了。

calculate = function()
{
    var weight = document.getElementById('weight').value || 0;
    var height = document.getElementById('height').value || 0;
    var age = document.getElementById('age').value || 0;
    var bodyfat = document.getElementById('bodyfat').value / 100;
    var select_lvl = document.querySelector('#a_level option:checked').value; 
    
//Sex Selection Hide-Show Div// 

var sex = document.querySelector('input[name="radios"]:checked').value || "Male" ;
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';
    if(bodyfat!=""){
    var bmr_mifflin_man = (10*weight) + (6.25*height) - (5*age) + 5;
document.getElementById('bmr_mifflin_man').value = bmr_mifflin_man.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";

var tdee_mifflin_man = (bmr_mifflin_man*select_lvl);
document.getElementById('tdee_mifflin_man').value = tdee_mifflin_man.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";

var bmr_mifflin_woman = (10*weight) + (6.25*height) - (5*age) - 161;
document.getElementById('bmr_mifflin_woman').value = bmr_mifflin_woman.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";

var tdee_mifflin_woman = (bmr_mifflin_woman*select_lvl);
document.getElementById('tdee_mifflin_woman').value = tdee_mifflin_woman.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";


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

//Result TDEE Katch Mc Ardle Formula
    var tdee_katch = (bmr_katch*select_lvl); 
document.getElementById('tdee_katch').value = bmr_katch.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";

//Result BMR Cunningham Formula
    var bmr_cunningham = (500 + ( 22 * ( weight * ( 1 - bodyfat )))); 
document.getElementById('bmr_cunningham').value = bmr_cunningham.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";

//Result TDEE Cunningham Formula
    var tdee_cunningham = (bmr_cunningham*select_lvl); 
document.getElementById('tdee_cunningham').value = bmr_cunningham.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";
    }


//This is Activity Level Radio Selection//
 var leggeros = document.getElementById('leggeros').value * 1.2;
 var attivos = document.getElementById('attivos').value * 1.375;
 var allenatos = document.getElementById('allenatos').value * 1.55;
 var Mattivos = document.getElementById('Mattivos').value * 1.75;
 var Eattivos = document.getElementById('Eattivos').value * 1.9;

}

//Reset Function
function resetFields() {

document.getElementById("bmrcalc").reset();  
document.getElementById('bmr_katch').value = ''
document.getElementById('bmr_mifflin_man').value = ''

var ele = document.getElementsByName("radiosa");
   for(var i=0;i<ele.length;i++)
      ele[i].checked = false;
      
}
.mts-field {
    width:100%;
    text-align: right;
    border-bottom: 2px solid #DCDCDE !important;
    background: #fff;
}
<label id="prov" class="mts-label">Peso</label>
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="mts-field" maxlength="3" id="weight" name="weight1" placeholder="es: 70Kg" form="bmrcalc" required/>

<label class="mts-label">Altezza</label>
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="mts-field" maxlength="3" id="height" name="height1" placeholder="es: 170cm" form="bmrcalc" required/>

<label class="mts-label">Età</label>
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="mts-field" maxlength="2" id="age" name="age1" placeholder="es: 25 anni" form="bmrcalc" required/>

<label class="mts-label">Bodyfat in %</label>
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="mts-field" maxlength="2" id="bodyfat" name"bodyfat1" placeholder="es: 15%" form="bmrcalc" />

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

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

  <div class="mts-radio-button1">
    <input type="radio" id="sexdonna" name="radios" value="Female" form="bmrcalc" required>
    <label class="mts-label-radio" for="sexdonna">Donna</label>
  </div>
  
  <!--Select Activity Level-->
  <div class="container_level">
  <select class="a_level" id="a_level" name="activ_level">
    <option value="0">Stile di vita / Attività fisica</option>
    <option id="leggeros" name="radiosa" value="1.2">Sedentario (1.2)</option>
    <option id="attivos" name="radiosa" value="1.375">Leggero (1.375) </option>
    <option id="allenatos" name="radiosa" value="1.55">Moderato (1.55)</option>
    <option id="Mattivos" name="radiosa" value="1.75">Attivo (1.75)</option>
    <option id="Eattivos" name="radiosa" value="1.9">Estremamente attivo (1.9)</option>
  </select>
</div>

<!---BMR Mifflin StJeor Result Field--->
<br>
<label class="mts-label">BMR Mifflin St Jeor Formula</label><br>


<div id="bmr-sexuomo">
<label class="mts-label">Male</label><br>
<input type="text" class="mts-field" id="bmr_mifflin_man" name="bmr_mifflin_man"
placeholder="0.000,0 Kcal" min="1" readonly/>
</div>

<br>
<div id="bmr-sexdonna" hidden>
<label class="mts-label">Female</label><br>
<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 Formula</label><br>
<div id="MifflinMale"> 
<label class="mts-label">Male</label><br>
<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>
<div id="MifflinFemale" hidden> 
<label class="mts-label">Female</label><br>
<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="Ktch1"> 
<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" maxlength="6"  readonly/>
</div>

<!---TDEE Cunningham Formula--->
<br>
<label class="mts-label">TDEE Cunningham Formula</label>
<div id="Cunninghams"> 
<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>
<form action="" id="bmrcalc">
</form>

<button name="calculate" onclick="calculate()">Calculate</button>
<button id="reset" onclick="resetFields()">Reset</button>

您需要对其进行逆向工程(与您想要的相反)。例如,认为当文本框中有内容时调用函数与当文本框中没有内容时不调用函数是一样的。所以现在你有了答案!您只需要在您的代码中添加:

if (document.getElementById('bodyfat').value==""){
preventDefault();
alert("You need to enter something in the textbox first");
}

这样想可以节省很多时间。为此,您不需要了解 Javascript,对吧?