title: How to get my js function to work with an anchor link / radio button
body: <p>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  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>            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{
                  }
              
              }        
    </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>          
       
       &lt;div class="sizes"&gt;
         &lt;h3&gt;Available sizes&lt;/h3&gt;
          &lt;hr&gt;
           &lt;h4&gt;Youth Sizes&lt;/h4&gt;
            &lt;%size_price.each do |item| %&gt;
             &lt;%if item['size'] == "youth small" %&gt;
              &lt;label for="&lt;%=item['size']%&gt;"&gt;
                                              S
            &lt;input type="radio" id="&lt;%=item['size']%&gt;" name="size" value="youth small" class="size-input" data-price="&lt;%=item['price']%&gt;" onclick="displayForm(this)"&gt;
             &lt;/label&gt;
             &lt;%elsif item['size'] == "youth medium" %&gt;
            &lt;label for="&lt;%=item['size']%&gt;"&gt;
           &lt;a href="#"&gt;M&lt;/a&gt;
            &lt;input type="radio" id="&lt;%=item['size']%&gt;" name="size" value="youth medium" class="size-input" data-price="&lt;%=item['price']%&gt;"&gt;
            &lt;/label&gt;
  .
  
        &lt;p style="visibility:hidden" id="adult"&gt;
         Line 1: &lt;input id="line1" name="line1" placeholder="Your custom message" type="text" maxlength="14" &gt;
                          &lt;br&gt;
         Line 2: &lt;input id="line2"  name="line2" placeholder="Your custom message" type="text" maxlength="14"&gt;
                          &lt;br&gt;
         Line 3: &lt;input id="line3" name="line3" placeholder="Your custom message" type="text" maxlength="14"&gt;
                          &lt;br&gt;
         Line 4: &lt;input id="line4"  name="line4" placeholder="Your custom message" type="text" maxlength="14"&gt;
                          &lt;/p&gt;
                          
                          &lt;p style="visibility:hidden" id="youth"&gt;
       Line 1: &lt;input id="line1" name="line1" placeholder="Your custom message" type="text" maxlength="14" &gt;
                          &lt;br&gt;
       Line 2: &lt;input id="line2"  name="line2" placeholder="Your custom message" type="text" maxlength="14"&gt;
                          &lt;br&gt;
      Line 3: &lt;input id="line3" name="line3" placeholder="Your custom message" type="text" maxlength="14"&gt;
                          &lt;br&gt;
      Line 4: &lt;input id="line4"  name="line4" placeholder="Your custom message" type="text" maxlength="14"&gt;
                          &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>