Set value to zero based on user input form condition using javascript-CodePudding

I have created a simple calculator. I have set the user input with if-else condition to show / hide input form fields using radio buttons. Here is the code:

    Amount Saved For retirement : Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck">
    <div id="ifYes" style="visibility:hidden">
        <div class="i_container">
         <div class="i_row">
            <label id="saved_amount_label_id" for="saved_amount_input_id1">Saved Amount For Retirement (₹)</label>
            <span><input class="form-control" name="saved_amount_input_name1" id="saved_amount_input_id1" type="number" step="50000" value="0" min="0" max="10000000" oninput="showValSavedAmount(this.value)" /></span>
         </div>
         
      </div>
      <div class="i_container">
         <div class="i_row">
            <label for="retirement_return_input_id1">Expected Return Percentage (%)</label>
            <span><input class="form-control" name="retirement_return_input_name1" id="retirement_return_input_id1" type="number" value="12" min="5" max="30" step="0.5" oninput="showValRetirementReturn(this.value)" /></span>
         </div>
         
      </div>

    </div>

Javascript:

function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.visibility = 'visible';
    }
    else document.getElementById('ifYes').style.visibility = 'hidden';

}

I need to set the value back to zero if the condition "NO" has been selected after given some input value in fields set to visible if they clicked "YES".

CodePudding user response：

Set the values to 0 in your else condition

function showValRetirementReturn(){

}
function showValSavedAmount(){

}

function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.visibility = 'visible';
        }
    else {
    document.getElementById('ifYes').style.visibility = 'hidden';
document.getElementById('saved_amount_input_id1').value ="0";
document.getElementById('retirement_return_input_id1').value ="0";
}
}

Amount Saved For retirement : Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck">
    <div id="ifYes" style="visibility:hidden">
        <div class="i_container">
         <div class="i_row">
            <label id="saved_amount_label_id" for="saved_amount_input_id1">Saved Amount For Retirement (₹)</label>
            <span><input class="form-control" name="saved_amount_input_name1" id="saved_amount_input_id1" type="number" step="50000" value="0" min="0" max="10000000" oninput="showValSavedAmount(this.value)" /></span>
         </div>
         
      </div>
      <div class="i_container">
         <div class="i_row">
            <label for="retirement_return_input_id1">Expected Return Percentage (%)</label>
            <span><input class="form-control" name="retirement_return_input_name1" id="retirement_return_input_id1" type="number" value="12" min="5" max="30" step="0.5" oninput="showValRetirementReturn(this.value)" /></span>
         </div>
         
      </div>

    </div>