title: Loop over an array multiple times until a second array is finished
body: <p>Im creating a function to make text a rainbow color. </p>
  
  <p>I have two arrays. One for color and one for a string. </p>
  
  <p>What I'm basically trying to do is loop over the colors as many times needed depending on how much text there are. </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 colors = ['blue', 'red', 'green', 'black', 'orange', 'purple'];
  
  function colorText(word) {
    var slicedText = word.split('');
    var rainbowText= '';
    
    if (typeof(word) !== 'string') {
      alert('Thats not a word!');
    } else {
      for (var i = 0; i &lt; slicedText.length; i++ ) {
        rainbowText += '&lt;span style="color:' + colors[i] + ';"&gt;' + slicedText[i] + '&lt;/span&gt;';
    }
    
    document.getElementById('text-input').innerHTML = rainbowText;
    }
  }
  
  colorText('this is a really long text');</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="text-input"&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>