title: javascript function not taking form value?
body: <p>I am trying to create a really simple radio button quiz with javascript and an html form. When I try to take the form question values and put them into variables, they're not being taken. When I console.log q1 I just get undefined. </p>
  
  <p>I've tried giving the radio buttons id's with getElementById, doesn't work. I've also tried document.forms['infoForm']['question1'].value;</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 results() {
    event.preventDefault();
  
    var q1 = document.getElementsByName('question1').value;
    var q2 = document.getElementsByName('question2').value;
    var q3 = document.getElementsByName('question3').value;
    var q4 = document.getElementsByName('question4').value;
  
    console.log(q1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form name="infoForm" id="infoForm" onsubmit="return results();" method="post"&gt;
  
    &lt;fieldset&gt;
      &lt;legend&gt;Here's a Quiz!&lt;/legend&gt;
      &lt;div class="question"&gt;
        quiz question 1&lt;br&gt;
        &lt;input type="radio" name="question1" value="W"&gt;W&lt;br&gt;
        &lt;input type="radio" name="question1" value="R1"&gt;R&lt;br&gt;
        &lt;input type="radio" name="question1" value="W"&gt;W&lt;br&gt;
      &lt;/div&gt;
      &lt;div class="question"&gt;
        quiz question 2&lt;br&gt;
        &lt;input type="radio" name="question2" value="R2"&gt;R&lt;br&gt;
        &lt;input type="radio" name="question2" value="W"&gt;W&lt;br&gt;
        &lt;input type="radio" name="question2" value="W"&gt;W&lt;br&gt;
      &lt;/div&gt;
      &lt;div class="question"&gt;
        quiz question 3&lt;br&gt;
        &lt;input type="radio" name="question3" value="W"&gt;W&lt;br&gt;
        &lt;input type="radio" name="question3" value="R3"&gt;R&lt;br&gt;
        &lt;input type="radio" name="question3" value="W"&gt;W&lt;br&gt;
      &lt;/div&gt;
      &lt;div class="question"&gt;
        quiz question 4&lt;br&gt;
        &lt;input type="radio" name="question4" value="W"&gt;W&lt;br&gt;
        &lt;input type="radio" name="question4" value="W"&gt;W&lt;br&gt;
        &lt;input type="radio" name="question4" value="R4"&gt;R&lt;br&gt;
      &lt;/div&gt;
      &lt;input type="submit" value="Submit"&gt;
  
    &lt;/fieldset&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When using console.log() for the question variables I would like to see the value the user has actually chosen, instead of undefined.</p>