title: Selecting Dynamically Created Radio Button Group in Javascript and getting inner text to show
body: <p>I dynamically created radio buttons as part of a function using the following code: </p>
  
  <pre><code>for(var j=0; j&lt;currentQuestion.choices.length; j++){
      var choiceText = currentQuestion.choices[j];
      var newRadioButton = document.createElement("input");
      newRadioButton.name="optionsList";
      newRadioButton.type="radio";
      newRadioButton.value = choiceText;
  
      newRadioButton.innerHTML = choiceText;
      label.appendChild(newRadioButton);
  }
  </code></pre>
  
  <p>The radio buttons are successfully created, but there are still 2 problems: </p>
  
  <p><strong>1) The innerHTML of each radio button is NOT showing up in the browser, although it shows up when I console log each radio button. So in the browser I'm seeing a radio button with no text next to it, but the console shows that I have text between the input tags</strong></p>
  
  <p><strong>2) I cannot figure out how to reference the dynamically created radio buttons to later on check which one has been selected.</strong> </p>
  
  <p>I've tried</p>
  
  <pre><code>var radioButtonsGroup = document.label1.optionsList;
  </code></pre>
  
  <p>or</p>
  
  <pre><code>var radioButtonsGroup = document.getElementsByName("optionsList");
  </code></pre>
  
  <p>or</p>
  
  <pre><code>var radioButtonsGroup = document.getElementsByTagName("inputs");
  </code></pre>
  
  <p>but they all return undefined.</p>