How to get my js function to work with an anchor link / radio button

Question

I can get my function to work when its not inside of an anchor tag, I know how to add a onclick event to a link but its not working however when i take it out om my label it shows the letter S and i click it it works right but i want it to work with my pretty radio button no just the letter s, any ideas? Please and thank you

  function displayForm(c){ if(c.value.includes("youth")){ document.getElementById("adult").style.visibility='visible'; document.getElementById("youth").style.visibility='hidden'; } else if(c.value.includes("ladies")){ document.getElementById("adult").style.visibility='hidden'; document.getElementById("youth").style.visibility='visible'; } else if(c.value.includes("adult")){ document.getElementById("adult").style.visibility='hidden'; document.getElementById("youth").style.visibility='visible';} else{ } } 

 <div class="sizes"> <h3>Available sizes</h3> <hr> <h4>Youth Sizes</h4> <%size_price.each do |item| %> <%if item['size'] == "youth small" %> <label for="<%=item['size']%>"> S <input type="radio" id="<%=item['size']%>" name="size" value="youth small" class="size-input" data-price="<%=item['price']%>" onclick="displayForm(this)"> </label> <%elsif item['size'] == "youth medium" %> <label for="<%=item['size']%>"> <a href="#">M</a> <input type="radio" id="<%=item['size']%>" name="size" value="youth medium" class="size-input" data-price="<%=item['price']%>"> </label> . <p style="visibility:hidden" id="adult"> Line 1: <input id="line1" name="line1" placeholder="Your custom message" type="text" maxlength="14" > <br> Line 2: <input id="line2" name="line2" placeholder="Your custom message" type="text" maxlength="14"> <br> Line 3: <input id="line3" name="line3" placeholder="Your custom message" type="text" maxlength="14"> <br> Line 4: <input id="line4" name="line4" placeholder="Your custom message" type="text" maxlength="14"> </p> <p style="visibility:hidden" id="youth"> Line 1: <input id="line1" name="line1" placeholder="Your custom message" type="text" maxlength="14" > <br> Line 2: <input id="line2" name="line2" placeholder="Your custom message" type="text" maxlength="14"> <br> Line 3: <input id="line3" name="line3" placeholder="Your custom message" type="text" maxlength="14"> <br> Line 4: <input id="line4" name="line4" placeholder="Your custom message" type="text" maxlength="14"> </p> 

Answer 1

I have added a code snippet click on radio button M you will get a list of input box .

I have made changes in this line added onclick event here.

<input type="radio" id="<%=item['size']%>" name="size" value="youth medium" class="size-input" data-price="<%=item['price']%>"  onclick="displayForm(this)">

  function displayForm(c){ if(c.value.includes("youth")){ document.getElementById("adult").style.visibility='visible'; document.getElementById("youth").style.visibility='hidden'; } else if(c.value.includes("ladies")){ document.getElementById("adult").style.visibility='hidden'; document.getElementById("youth").style.visibility='visible'; } else if(c.value.includes("adult")){ document.getElementById("adult").style.visibility='hidden'; document.getElementById("youth").style.visibility='visible';} else{ } } 

 <div class="sizes"> <h3>Available sizes</h3> <hr></hr> <h4>Youth Sizes</h4> <%size_price.each do |item| %> <%if item['size'] = "youth small" %> <label for="<%=item['size']%>"> S <input type="radio" id="<%=item['size']%>" name="size" value="youth small" class="size-input" data-price="<%=item['price']%>" onclick="displayForm(this)"> </label> <%elsif item['size'] = "youth medium" %> <label for="<%=item['size']%>"> <a href="#">M</a> <input type="radio" id="<%=item['size']%>" name="size" value="youth medium" class="size-input" data-price="<%=item['price']%>" onclick="displayForm(this)"> </label> <p style="visibility:hidden" id="adult"> Line 1: <input id="line1" name="line1" placeholder="Your custom message" type="text" maxlength="14" > <br> Line 2: <input id="line2" name="line2" placeholder="Your custom message" type="text" maxlength="14"> <br> Line 3: <input id="line3" name="line3" placeholder="Your custom message" type="text" maxlength="14"> <br> Line 4: <input id="line4" name="line4" placeholder="Your custom message" type="text" maxlength="14"> </p> <p style="visibility:hidden" id="youth"> Line 1: <input id="line1" name="line1" placeholder="Your custom message" type="text" maxlength="14" > <br> Line 2: <input id="line2" name="line2" placeholder="Your custom message" type="text" maxlength="14"> <br> Line 3: <input id="line3" name="line3" placeholder="Your custom message" type="text" maxlength="14"> <br> Line 4: <input id="line4" name="line4" placeholder="Your custom message" type="text" maxlength="14"> </p>