隐藏 html 隐藏字段 div 和 JS Var

Question

我正在尝试使用 hidden in a div with Javascript 来隐藏 HTML 字段。

HTML 和 JS:

<div class="fieldcontainer">
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="mts-field" maxlength="4" id="tdee" name"tdee" placeholder="Inserisci il tuo TDEE" form="fbday" required autocomplete="off"/>
<label>Spesa calorica</label>
</div>

<div class="container_level">
  <select class="target" id="target_select" form="fbday" name="target">
    <option value="0">Stile di vita / Attività fisica</option>
    <option id="mass1" name="radsa" value="5">mass1</option>
    <option id="mass2" name="radsa" value="10">mass2</option>
    <option id="mass3" name="radsa" value="15">mass3</option>
    <option id="def1" name="radsa" value="10">def1</option>
    <option id="def2" name="radsa" value="15">def2</option>
    <option id="def3" name="radsa" value="20">def3</option>
  </select>
</div>

<!---Fabbisogno Giornaliero--->

<div id="fbbday0" class="results" hidden>
<input type="text" form="fbday" class="result-field" id="dayli_intake_mass" name="dayli_intake"
placeholder="Fabbisogno giornaliero / 0.000 Kcal" min="1" readonly/>
<label class="mts-label"></label>
</div>

<div id="fbbday1" class="results" hidden>
<input type="text" form="fbday" class="result-field" id="dayli_intake_def" name="dayli_intake"
placeholder="Fabbisogno giornaliero / 0.000 Kcal" min="1" readonly/>
<label class="mts-label"></label>
</div>

<form action="" id="fbday">
</form>

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

calculate = function()
{
    var tdee = document.getElementById('tdee').value;
    var target = document.querySelector('#target_select option:checked').value;
    
    var dayli_intake_mass = ((+target)/100*(+tdee)+(+tdee));
    var kcal = "Devi assumere "+dayli_intake_mass.toLocaleString('it-IT',{maximumFractionDigits: 0}) + " Kcal"; document.getElementById('dayli_intake_mass').value = kcal;
    
    var dayli_intake_def = ((+tdee)-(+target)/100*(+tdee));
    var kcal = "Devi assumere "+dayli_intake_def.toLocaleString('it-IT',{maximumFractionDigits: 0}) + " Kcal"; document.getElementById('dayli_intake_def').value = kcal;
    
//This is Target Radio Selection//
 var mass1 = document.getElementById('mass1').value;
 var mass2 = document.getElementById('mass2').value;
 var mass3 = document.getElementById('mass3').value;
 var def1 = document.getElementById('def1').value;
 var def2 = document.getElementById('def2').value;
 var def3 = document.getElementById('def3').value;    

//This is HideShow Result/
var trgt = document.querySelector('#target_select option:checked').value;
document.getElementById('fbbday0').hidden = trgt !== '5';
document.getElementById('fbbday0').hidden = trgt !== '10';
document.getElementById('fbbday0').hidden = trgt !== '15';
document.getElementById('fbbday1').hidden = trgt !== '10';
document.getElementById('fbbday1').hidden = trgt !== '15';
document.getElementById('fbbday1').hidden = trgt !== '20';

}

https://jsfiddle.net/snake93/w1nLbhxv/151/

当我点击 mass1 和 def2 时它工作正常，而在其他人上它不工作，因此永久隐藏结果字段。我想这是等值的错，但我不确定。

1.I 想显示这个结果：var dayli_intake_mass = ((+ target) / 100 * (+ tdee) + (+ tdee));只有选择质量1，质量2或弥撒3。否则

2.I 想显示这个结果： var dayli_intake_def = ((+ tdee) - (+ target) / 100 * (+ tdee)); only when def1, def2 or def3 is selected. 因此，质量 1、质量 2 和质量 3 选择应显示 dayli_intake_mass

虽然选择 def1、def2 和 def3 应该显示 dayli_intake_def

Answer 1

根据我对用例的理解，这两个 div 不是必需的。根据所选内容，您可以获得 div 渲染结果。

 <div class="fieldcontainer">
        <input
            oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
            type="number" class="mts-field" maxlength="4" id="tdee" name"tdee" placeholder="Inserisci il tuo TDEE"
            form="fbday" required autocomplete="off" />
        <label>Spesa calorica</label>
    </div>

    <div class="container_level">
        <select class="target" id="target_select" form="fbday" name="target">
            <option value="0">Stile di vita / Attività fisica</option>
            <option id="mass1" name="radsa" value="5">mass1</option>
            <option id="mass2" name="radsa" value="10">mass2</option>
            <option id="mass3" name="radsa" value="15">mass3</option>
            <option id="def1" name="radsa" value="10">def1</option>
            <option id="def2" name="radsa" value="15">def2</option>
            <option id="def3" name="radsa" value="20">def3</option>
        </select>
    </div>

    <!---Fabbisogno Giornaliero--->

    <div id="fbbday0" class="results" hidden>
        <input type="text" form="fbday" class="result-field" id="dairyInTakeResult" name="dayli_intake" readonly />
        <label class="mts-label"></label>
    </div>

    <form action="" id="fbday">
    </form>

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

已编辑 HTML

 <div class="fieldcontainer">
        <input
            oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
            type="number" class="mts-field" maxlength="4" id="tdee" name"tdee" placeholder="Inserisci il tuo TDEE"
            form="fbday" required autocomplete="off" />
        <label>Spesa calorica</label>
    </div>

    <div class="container_level">
        <select class="target" id="target_select" form="fbday" name="target">
            <option value="0">Stile di vita / Attività fisica</option>
            <option class="mass" id="mass1" name="radsa" value="5">mass1</option>
            <option class="mass" id="mass2" name="radsa" value="10">mass2</option>
            <option class="mass" id="mass3" name="radsa" value="15">mass3</option>
            <option class="def" id="def1" name="radsa" value="10">def1</option>
            <option class="def" id="def2" name="radsa" value="15">def2</option>
            <option class="def" id="def3" name="radsa" value="20">def3</option>
        </select>
    </div>

    <!---Fabbisogno Giornaliero--->

    <div id="fbbday0" class="results" hidden>
        <input type="text" form="fbday" class="result-field" id="dairyInTakeResult" name="dayli_intake" readonly />
        <label class="mts-label"></label>
    </div>

    <form action="" id="fbday">
    </form>

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

    calculate = function () {
        var tdee = document.getElementById('tdee').value;
        var target = document.querySelector('#target_select option:checked').value;
    
        var dayli_intake_mass = ((+target) / 100 * (+tdee) + (+tdee));

        var kcal = "Devi assumere " + dayli_intake_mass.toLocaleString('it-IT', { maximumFractionDigits: 0 }) + " Kcal"; 
        document.getElementById('dairyInTakeResult').value = kcal;
    
        var dayli_intake_def = ((+tdee) - (+target) / 100 * (+tdee));

        kcal = "Devi assumere " + dayli_intake_def.toLocaleString('it-IT', { maximumFractionDigits: 0 }) + " Kcal"; 
        document.getElementById('dairyInTakeResult').value = kcal;
    
        //This is HideShow Result/
        document.getElementById('dairyInTakeResult').value = kcal;

        var trgt = document.querySelector('#target_select option:checked').value;

        if (trgt === "0" ){
            document.getElementById('fbbday0').hidden = true
            document.getElementById('dairyInTakeResult').value = '';
        } else {
            document.getElementById('fbbday0').hidden = false
        } 
    }     calculate = function () {
        var tdee = document.getElementById('tdee').value;
        var target = document.querySelector('#target_select option:checked').value;
    
        var dayli_intake_mass = ((+target) / 100 * (+tdee) + (+tdee));

        var kcal = "Devi assumere " + dayli_intake_mass.toLocaleString('it-IT', { maximumFractionDigits: 0 }) + " Kcal"; 

        var dayli_intake_def = ((+tdee) - (+target) / 100 * (+tdee));

        kcal = "Devi assumere " + dayli_intake_def.toLocaleString('it-IT', { maximumFractionDigits: 0 }) + " Kcal"; 
    
   
        document.getElementById('dairyInTakeResult').value = kcal;
        var trgt = document.querySelector('#target_select option:checked').value;

        //If header selected, zero and hide the result input, else show
        if (trgt === "0" ){
            document.getElementById('fbbday0').hidden = true
            document.getElementById('dairyInTakeResult').value = '';
        } else {
            document.getElementById('fbbday0').hidden = false
        } 
    }

已编辑 JS


 calculate = function () {
        var tdee = document.getElementById('tdee').value;
        var target = document.querySelector('#target_select option:checked').value;
        var optionClass = document.querySelector('#target_select option:checked').className;
    
        document.getElementById('dairyInTakeResult').value = calculateCalorie(tdee, target, optionClass);
        var trgt = document.querySelector('#target_select option:checked').value;

        //If header selected, zero and hide the result input, else show
        if (trgt === "0" ){
            document.getElementById('fbbday0').hidden = true
            document.getElementById('dairyInTakeResult').value = '';
        } else {
            document.getElementById('fbbday0').hidden = false
        } 
    }  

    function calculateCalorie(tdee, target, optionClass){
        var dairyCalorie;
        if (optionClass === 'mass'){
            dairyCalorie = ((+target) / 100 * (+tdee) + (+tdee));
            return "Devi assumere " + dairyCalorie.toLocaleString('it-IT', { maximumFractionDigits: 0 }) + " Kcal"; 

        } else if (optionClass === 'def'){
            dairyCalorie = ((+tdee) - (+target) / 100 * (+tdee));
            return "Devi assumere " + dairyCalorie.toLocaleString('it-IT', { maximumFractionDigits: 0 }) + " Kcal"; 
        } else {
            alert('Please make a selection');
            return;
        }
    }

隐藏 html 隐藏字段 div 和 JS Var

Hide field with html hidden div and JS Var

html

javascript

css

jquery

calculator