title: Why won't this global variable work? It works perfectly as a local variable
body: <p>I want to make the "myColor" variable global so that I don't have to paste it into every function but I can't get it to work. How can I get it to work? Any help is much appreciated.</p>
  
  <pre><code>var myColor = document.getElementById("colorSelect").value; //this global variable isn't working
  
  function r1c1BackgroundColor() { // Isn't working 
      document.getElementsByClassName("tableBox")[0].style.backgroundColor = myColor;
  }
  
  function r1c2BackgroundColor() { // works fine
      var myColor = document.getElementById("colorSelect").value;
      document.getElementsByClassName("tableBox")[1].style.backgroundColor = myColor;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;tr&gt;
  &lt;td id="r1c1" class="tableBox" onclick="r1c1BackgroundColor()"&gt;&lt;/td&gt;
  &lt;td id="r1c2" class="tableBox" onclick="r1c2BackgroundColor()"&gt;&lt;/td&gt;
  &lt;td id="r1c3" class="tableBox" onclick="r1c3BackgroundColor()"&gt;&lt;/td&gt;
  
  &lt;!-- etc --&gt;
  </code></pre>