title: Rainbow Scrolling Text Using <span>
body: <p>I would like to turn a small paragraph into rainbow text, in which the colors scroll from right to left in an infinite loop using JavaScript. I currently have this paragraph:</p>
  
  <pre><code>&lt;div id="rainbow"&gt;
    &lt;p id="rtext"&gt;
      &lt;span id="s1" style="color: red"&gt;H&lt;/span&gt;
      &lt;span id="s2" style="color: blue"&gt;e&lt;/span&gt;
      &lt;span id="s3" style="color: green"&gt;l&lt;/span&gt;
      &lt;span id="s4" style="color: purple"&gt;l&lt;/span&gt;
      &lt;span id="s5" style="color: orange"&gt;o&lt;/span&gt;
      &lt;span id="s6" style="color: magenta"&gt;!&lt;/span&gt;
    &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="actbtn"&gt;
      &lt;button onclick="activ()"&gt;Click for RAINBOW!&lt;/button&gt;
  &lt;/div&gt;`
  </code></pre>
  
  <p>I am fairly new to JavaScript so I am not sure how to write the <code>activ()</code> function to infinitely scroll the colors.</p>
  
  <p>EDIT:
  I would like to thank Ben for the looping script, but now I also need to know how to use the          <code>activ()</code> function to change the color of a <code>&lt;span&gt;</code> element. I have tried the following script:
      <code>function activ() {
      document.getElementById("s1").style.color = 'magenta';
  }</code>
  But the color will not change. I am trying to keep the script as simple as possible, but also make it work.</p>
  
  <p>FINAL EDIT:
  I used Ivan's "UPD Without JQuery" code and added a few colors, and this is what I end up with:</p>
  
  <pre><code>&lt;script&gt;
  function EyeVommit() {
      document.getElementById("actbtn").style.display = 'none';
      'use strict';
      var colors = ['red', 'blue', 'green', 'purple', 'orange', 'magenta', 'chartreuse', 'cyan', 'yellow'],
          target = document.getElementById('rtext').children,
          i,
          len = colors.length,
          inter = setInterval(function() {
              colors.unshift(colors.pop());
              for (i = 0; i &lt; len; i++) {
                  target[i].style.color = colors[i];
              }
          }, 200);
  }
  &lt;/script&gt;
  &lt;div id="table1"&gt;
  &lt;p id="rtext"&gt; &lt;span id="s1"&gt;H&lt;/span&gt;&lt;span id="s2"&gt;e&lt;/span&gt;&lt;span id="s3"&gt;l&lt;/span&gt;&lt;span  id="s4"&gt;l&lt;/span&gt;&lt;span id="s5"&gt;o&lt;/span&gt;&lt;span id="s6"&gt;!&lt;/span&gt;
  
      &lt;br /&gt;
      &lt;div id="actbtn"&gt;
          &lt;button onclick="EyeVommit()"&gt;Pabam!&lt;/button&gt;
      &lt;/div&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="http://jsfiddle.net/Wrw6A/" rel="nofollow">The result.</a> </p>