title: set javascript variable using html attribute
body: <p>I am trying to re-create the functionality of <a href="https://chriscoyier.net/" rel="nofollow noreferrer">https://chriscoyier.net/</a> where you have a form with radio buttons, and as you click a radio button, the text changes.</p>
  
  <p>What I started with was:</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>window.onload=function() {
  
    document.getElementById("hidden_elements").style.display="none";
  
    //  attach the click event handler to the radio buttons
    var radios = document.forms[0].elements["group1"];
    for (var i = [0]; i &lt; radios.length; i++)
      radios[i].onclick=radioClicked;
  }
  
  function radioClicked() {
     if (this.value == "two") {
      document.getElementById("hidden_elements").style.display="block";
     } else {
      document.getElementById("hidden_elements").style.display="none";
     }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="picker" method="post" action=""&gt;
  Item 1: &lt;input type="radio" name="group1" value="one" /&gt;
  Item 2: &lt;input type="radio" name="group1" value="two" /&gt;
  Item 3: &lt;input type="radio" name="group1" value="three" /&gt;&lt;br /&gt;
  &lt;br /&gt;
  &lt;div id="hidden_elements"&gt;
  Input 1: &lt;input type="text" id="intext" /&gt;
  Input 2: &lt;input type="text" id="intext2"  /&gt;
  Input 3: &lt;input type="text" id="intext3"  /&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;/div&gt;
  &lt;input type="submit" id="submitbutton" value="Send form" /&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This allows me hide or display the div with id="hidden_elements" <strong>if</strong> input number 2 is selected.</p>
  
  <p>What I want to do is hide or display the individual elements of "hidden_elements" based on the input 1, 2 or 3.</p>
  
  <p>I tried changing the "hidden_elements" attributes to:</p>
  
  <pre><code>&lt;div id="hidden_elements"&gt;
  Input 1: &lt;input type="text" name="one" /&gt;
  Input 2: &lt;input type="text" name="two"  /&gt;
  Input 3: &lt;input type="text" name="three"  /&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and JS to:</p>
  
  <pre><code>var hide = document.getElementById("hidden_elements");
          for (var i = [0]; i &lt; hide.length; i++)
              hide[i].style.display = "none";
  
  function radioClicked() {
          document.getElementsByName(this.value).style.display = "block"
      }
  </code></pre>
  
  <p>But that doesn't work either.</p>
  
  <p>I've tried a less appealing approach using if/else statements, but that too doesn't work.</p>
  
  <pre><code>&lt;div id="paragraphs"&gt;
      &lt;div id="hidden_element" name="one"&gt;Paragraph 1 &lt;/div&gt;
      &lt;div id="hidden_element" name="two"&gt;Paragraph 2 &lt;/div&gt;
      &lt;div id="hidden_element" name="three"&gt;Paragraph 3 &lt;/div&gt;
  &lt;/div&gt;
  
  function radioClicked() {
          if (this.value == "one") {
              document.getElementById("hidden_element_one").style.display="block";
          } else if (this.value == "two") {
              document.getElementById("hidden_element_two").style.display="block";
          } else if (this.value == "three") {
              document.getElementById("hidden_element_three").style.display="block";
          }
      }
  </code></pre>
  
  <p>I've tried a few more approaches but the behaviour isn't what I want. Any idea how I can change the display from "none" to "block" based on the selected radio-button? (I know you can do it with JQuery but I'm trying to learn Javascript)</p>