title: Pure Javascript - setInterval (1s), setAttribute
body: <p>I'd like to change the color of the sqaure (<strong>#myID: width = height = 100px</strong>) every second. <em>(To check if that switch loop works, in every "case" I wrote <strong>console.log("smth happened");</strong>.)</em>
  But the color of this square does not change. <a href="http://jsfiddle.net/kardaw/M9rtM/1/" rel="nofollow">"FIDDLE" </a></p>
  
  <p>Next thing, every second <strong>document.getElementById('myID')</strong> is written to a new formed variable <strong>thesquare</strong>. How to make the variable global, outside the function?</p>
  
  <p>Javascript:</p>
  
  <pre><code>var i = 0;
  function changecolor()
  {       
      var thesquare = document.getElementById('myID');
      switch (i)
      {
          case 0 :
          thesquare.setAttribute("background-color","red");
          ++i;
          break;
  
          case 1 :
          thesquare.setAttribute("background-color","green");
          ++i;
          break;
  
          default :
          thesquare.setAttribute("background-color","blue");
          i=0;
          break;
      }
  }
  setInterval("changecolor()",1000);
  </code></pre>