title: Javascript radiobutton show and hide field
body: <p>Hi I will try to give only the needed information
  I have a div container with 3 radiobuttons. ids &quot;rad1&quot;, &quot;rad2&quot;, &quot;rad3&quot;
  I have 2 textfields in a form with ids &quot;textField1&quot; , &quot;textField2&quot;.</p>
  <p>I want to show different textFields depending on which radio button is clicked.</p>
  <p>if  (&quot;rad1&quot; is clicked)  I want to show &quot;textField1&quot;</p>
  <p>if  (&quot;rad2&quot; is clicked)  I want to show &quot;textField2&quot;</p>
  <p>if  (rad3 is clicked/nothing is clicked)  I want to hide both.</p>
  <p>This is my JavaScript that I though would work but does not.</p>
  <pre><code>fieldShower();
  
  function fieldShower() {
    if (document.getElementById('rad1').checked) {
      document.getElementById('textField1').style.display = 'block';
      document.getElementById('textField2').style.display = 'none';
    } else if(document.getElementById('rad2').checked) {
      document.getElementById('textField1').style.display = 'none';
      document.getElementById('textField2').style.display = 'block';
    } else {
      //hide both
      document.getElementById('textField1').style.display = 'none';
      document.getElementById('textField2').style.display = 'none';
    }
  }
  </code></pre>