【问题标题】:Don't calculate if a field is empty (Js calculator)不计算字段是否为空(Js 计算器)
【发布时间】:2021-08-30 08:52:04
【问题描述】:

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

我对JS不是很了解,所以希望能在这里得到帮助……谢谢大家的回答,我在下面留下更多信息。

基本上一切正常。但是,当 bodyfat 字段为空时,将执行 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/

【问题讨论】:

    标签: javascript html jquery conditional-statements calculator


    【解决方案1】:

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

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

    这样思考可以帮助节省大量时间。你不需要知道任何关于 Javascript 的知识,对吧?

    【讨论】:

    • 感谢您的回复。代码正常工作。我把它放在我想应用函数的地方,所以只适用于 McArdle 和 Cunningham 公式。虽然没有必要,但我想知道为什么不显示警报消息。
    • 尝试将 alert 语句放在 preventDefault 语句之上。
    【解决方案2】:

    我添加了一个 if 条件来检查体脂现在它可以正常工作了。

    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>

    【讨论】:

    • 感谢您的回答,您的方法绝对是非常快速和简单的,它可以正常工作。但是,我想我想使用上一个答案中推荐的代码,因为我想要一条警告消息向用户指示如果 Bodyfat 为空,则计算不会开始。
    猜你喜欢
    • 1970-01-01
    • 2012-10-11
    • 1970-01-01
    • 2019-12-01
    • 2021-05-07
    • 2022-08-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多