title: Switching backgrounds, while switching text
body: <p>I was able to make the text loop infinitely and the body color change once:</p>
  
  <pre><code>&lt;?php?&gt;
  &lt;style type="text/css"&gt;
  &lt;!--
  header{background-color:orange;}
  #color1{background-color:red;}
  #color2{background-color:green;}
  #color3{background-color:blue;}
  --&gt;
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  &lt;!--
  var flip = (function() {
      var flip = ['_addText1','_addText2','_addText3'];
      var count = -1;
      return function() {
          return flip[++count % flip.length];
      }
  }());
  --&gt;
  &lt;/script&gt;
  
  
  &lt;body id="color1"&gt;
  
  &lt;header onclick="document.getElementById('click').innerHTML = flip(); document.getElementById('color1').setAttribute('id', 'color2');"&gt;
      &lt;h1&gt;StaticText&lt;a id="click"&gt;_ThisWillChange&lt;/a&gt;&lt;/h1&gt;
      &lt;p&gt;Click anywhere in the header to change the text above.&lt;br /&gt;
         This will also change the body color.&lt;/p&gt;
  &lt;/header&gt;
  
  &lt;/body&gt;
  &lt;?php?&gt;
  </code></pre>
  
  <p>The first problem is; if I add more color changes to the 'onclick' attribute it stops working all together. Basically I want the color to loop with the text:</p>
  
  <pre><code>document.getElementById('color2').setAttribute('id', 'color3');
  document.getElementById('color3').setAttribute('id', 'color1');
  </code></pre>
  
  <p>The second problem is that I'm not really 'fluent' in javascript. I'm actually lucky I figured out this much to be honest.</p>
  
  <p>I'm sure there's a way to put it all into the javascript (to keep my HTML clean), but I don't know how.</p>
  
  <p>Any help would be most appreciated! Thanks in advance...</p>