Loop over an array multiple times until a second array is finished

Question

Im creating a function to make text a rainbow color.

I have two arrays. One for color and one for a string.

What I'm basically trying to do is loop over the colors as many times needed depending on how much text there are.

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 < slicedText.length; i++ ) {
      rainbowText += '<span style="color:' + colors[i] + ';">' + slicedText[i] + '</span>';
  }
  
  document.getElementById('text-input').innerHTML = rainbowText;
  }
}

colorText('this is a really long text');

<div id="text-input">
  
</div>

Change this line rainbowText += '<span style="color:' + colors[i % colors.length] + ';">' + slicedText[i] + '</span>'; — Ram
– Ram, Commented Oct 11, 2016 at 23:26

Austin Brunkhorst · Accepted Answer · 2016-10-11 23:21:54Z

4

You are indexing outside the bounds of the array of colors when the slicedText.length is greater than colors.length. If the desired behavior is to start at index 0 after it reaches the end of the colors, use the modulo operator.

colors[ i % colors.length ]

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 < slicedText.length; i++) {
      rainbowText += '<span style="color:' + colors[ i % colors.length ] + ';">' + slicedText[ i ] + '</span>';
    }

    document.getElementById( 'text-input' ).innerHTML = rainbowText;
  }
}

colorText( 'this is a really long text' );

<div id="text-input">
  
</div>

edited Oct 11, 2016 at 23:21

answered Oct 11, 2016 at 23:18

Austin Brunkhorst

21.1k6 gold badges49 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Redu · Accepted Answer · 2016-10-12 05:37:21Z

0

Another way of implementing the same job without coloring the white spaces.

var str = "this is a really long text",
 colors = ['blue', 'red', 'green', 'black', 'orange', 'purple'],
 result = [...Array(str.length)].reduce((p,_,i) => p + (str[i] !== ' ' ? '<span style="color:'+colors[i%colors.length]+';">' + str[i] + '</span>'
                                                                       : ' '),'');
document.getElementById("textdiv").innerHTML = result;

<div id="textdiv"></div>

answered Oct 12, 2016 at 5:37

Redu

26.3k6 gold badges61 silver badges84 bronze badges

Collectives™ on Stack Overflow

Loop over an array multiple times until a second array is finished

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related