I have 2 radio buttons (YES) (NO) and an input (PLEASE EXPLAIN) The input is hidden and the intention is to make it visible only if you select (YES) I want to create a function with parameters so that it can be reused. I don't know what's wrong with my code looks correct to me but the input field doesn't appear if you click (YES) and I see no errors

HTML CODE

<div>
  <strong class="input-group-title">Have you had any surgeries?</strong>
</div>
<div>
  <div>
    <input type="radio" id="any_surgeries_yes" value="Yes">
    <label>Yes</label>
  </div>
  <div>
   <input type="radio" id="any_surgeries_no" value="No">
   <label>No</label>
  </div>
</div>

<div class="pop-up-field toggle-content" id="explain-surgeries">
   <input type="text" name="please-explain">
   <label>Please Explain</label>
</div>

CSS CODE

.toggle-content {
    display: none;
}

.toggle-content.is-visible {
    display: block;
}

.pop-up-field {
    /*empty*/
}

JAVASCRIPT CODE

const conditionalToggler = function(condYes,condNo,toggableField) {
    if (condYes.checked) {
      toggableField.classList.add('is-visible');
  
      } else if(condNo.checked){
      toggableField.classList.remove('is-visible');
      }
    };
  

const surgeriesYes = document.getElementById('any_surgeries_yes');
const surgeriesNo = document.getElementById('any_surgeries_no');
const explainSurgeries = document.getElementById('explain-surgeries');


surgeriesYes.addEventListener('change',conditionalToggler(surgeriesYes, surgeriesNo, explainSurgeries));
surgeriesNo.addEventListener('change',conditionalToggler(surgeriesYes, surgeriesNo, explainSurgeries));