Best way to toggle radio input and call a javascript function

Issue

I have a form with radio buttons, and I’d like to show/hide a div when people click each of the radio options. The code below works per se, but it’s buggy, ie: it’ll work if I hard refresh the page, but other times it will only show/hide the div but it won’t toggle between the radio inputs. I usually call this function inside a but this is the first I’m trying to have it called when a user clicks on a form element. Is there a better way of calling the function so that it will always work as expected?

<label class="rcontainer" onmousedown="toggleSlide('taxagentdet');" id="ag1">No
  <input id="form18" type="radio" name="TaxAgent" value="0">
  <span class="rbutton"></span>
</label>
<label class="rcontainer" onmousedown="toggleSlide('taxagentdet');" id="ag2">Yes
  <input id="form19" type="radio" name="TaxAgent" value="1">
  <span class="rbutton"></span>
</label>

Solution

function toggleDiv(toggleType) {
const el = document.getElementById("div_content");
    if(toggleType === 'yes')  el.style.display="block";
  if(toggleType === 'no')  el.style.display="none";
}
<input type="radio" onChange="toggleDiv('yes')" name="Yes" id="yes" checked="true"> <label for="yes" >YES</label>
<input type="radio" onChange="toggleDiv('no')" name="Yes" id="no"> <label for="no">NO</label>

<div id="div_content">
DIV Content
</div>

Answered By – Siva Krishna Madasu

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.