Hide field with html hidden div and JS Var

Question

I am trying to hide HTML fields using hidden in a div with Javascript.

HTML and 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/

When I click on mass1 and def2 it works correctly, while on others it does not work, therefore perpetually hiding the result field. I suppose it's the fault of equal values, but I'm not sure.

1.I would like to show the result of this: var dayli_intake_mass = ((+ target) / 100 * (+ tdee) + (+ tdee)); only when mass1, mass2 or mass3 is selected. Otherwise

2.I would like to show the result of this: var dayli_intake_def = ((+ tdee) - (+ target) / 100 * (+ tdee)); only when def1, def2 or def3 is selected. So, the mass1, mass2 and mass3 selection should show dayli_intake_mass

While the selection def1, def2 and def3 should show dayli_intake_def

Answer 1

The two divs are not necessary, given my understanding of the use case. You can have on div rendering result depending on what has been selected.

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

Edited 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
        } 
    }  

Edited 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;
        }
    }