title: "undefined" Error with onchange Event
body: <p>I want to make it so when I press a button, it will print a different number depending on which button I press. <strong>I want the buttons to look the same</strong>. This is what I have:</p>
  
  <pre><code>&lt;div id="radiobuttons" class="container" name="buttons" align=center onchange="myFunction"&gt;
  
      &lt;h2&gt;I Want my Building to be Made of:&lt;/h2&gt;
  
    &lt;ul&gt;
    &lt;li&gt;
      &lt;input type="radio" id="brick-option" name="material" value="1"&gt;
      &lt;label for="brick-option"&gt;Bricks&lt;/label&gt;
  
      &lt;div class="check"&gt;&lt;/div&gt;
    &lt;/li&gt;
  
    &lt;li&gt;
      &lt;input type="radio" id="wood-option" name="material" value="3"&gt;
      &lt;label for="wood-option"&gt;Wood&lt;/label&gt;
  
      &lt;div class="check"&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;/li&gt;
  
    &lt;li&gt;
      &lt;input type="radio" id="stone-option" name="material" value="2"&gt;
      &lt;label for="stone-option"&gt;Stone&lt;/label&gt;
  
      &lt;div class="check"&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;p id="paragraph" align="center"&gt;0&lt;/p&gt;
  
  &lt;script&gt;
  
  function myFunction() {
      var x = document.getElementById("radiobuttons").value;
      document.getElementById("paragraph").innerHTML = x;
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Although, when I press a button, it says undefined. What does this mean, and how can I fix this?</p>