Tengo 2 botones de radio (SÍ) (NO) y una entrada (POR FAVOR EXPLIQUE) La entrada está oculta y la intención es hacerla visible solo si selecciona (SÍ) Quiero crear una función con parámetros para que pueda ser reutilizado No sé cuál es el problema con mi código, me parece correcto, pero el campo de entrada no aparece si hace clic en (SÍ) y no veo errores.

CÓDIGO HTML

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

CÓDIGO CSS

 .toggle-content { display: none; } .toggle-content.is-visible { display: block; } .pop-up-field { /*empty*/ }

CÓDIGO JAVASCRIPT

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