title: Why does the function only give the value of the first input?
body: <p>Whenever I try to click on the colors it only gives "White", but it doesn't want to give the other values on screen.</p>
  
  <p>I don't understand what I'm doing wrong here. </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>var x = document.getElementById("mySelect").value;
  function myFunction() {
    document.getElementById("text").innerHTML = "Achtergrondkleur is: " + x;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table BORDER="4"&gt;
    &lt;tr&gt;
      &lt;td colspan="2" class="kleur"&gt;Selecteer een kleur!&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="radio"&gt;
      &lt;td onchange="myFunction()"&gt;
        &lt;input id="mySelect" value="Wit" type="radio" class="color"&gt;Wit &lt;br&gt;
        &lt;input id="mySelect" value="Grijs" type="radio" class="color"&gt;Grijs &lt;br&gt;
        &lt;input id="mySelect" value="Groen" type="radio" class="color"&gt;Groen &lt;br&gt;
        &lt;input id="mySelect" value="Geel" type="radio" class="color"&gt;Geel &lt;br&gt;
        &lt;input id="mySelect" value="Rood" type="radio" class="color"&gt;Rood &lt;br&gt;
        &lt;input id="mySelect" value="Blauw" type="radio" class="color"&gt;Blauw &lt;br&gt;
        &lt;input id="mySelect" value="Zwart" type="radio" class="color"&gt;Zwart &lt;br&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;div class="circle"&gt;&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="radio"&gt;
      &lt;td colspan="2"&gt;
        &lt;p id="text"&gt;&lt;/p&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>