Iterating h1 using js

busayolawumi 0
Viewed 32

I need help using javaScript to iterate over this h1, giving each span a different color from an array. I tried this, but its giving every span the last color in the array.

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

const rainbow = document.querySelectorAll('h1');

for (let rain of rainbow) {
  for (let i = 0; i < colors.length; i++) {
    rain.style.color = colors[i];
  }
}
<h1>
  <span>R</span>
  <span>A</span>
  <span>I</span>
  <span>N</span>
  <span>B</span>
  <span>O</span>
  <span>W</span>
</h1>

javascript
4 Answers

If you use querySelectorAll to also pick up the spans you can iterate over them (no need for a nested loop), and apply the colour to each one.

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

const spans = document.querySelectorAll('h1 span');

for (let i = 0; i < spans.length; i++) {
  spans[i].style.color = colors[i];
}
<h1>
  <span>R</span>
  <span>A</span>
  <span>I</span>
  <span>N</span>
  <span>B</span>
  <span>O</span>
  <span>W</span>
</h1>

userkfM50

You are very close, the issue you have is that you are looping every h1, not the span within, you are also looping inside this, so, with the following code;

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

const rainbow = document.querySelectorAll('h1 span');
i = 0;
for (let rain of rainbow) {
  rain.style.color = colors[i];
  i++;
}
<h1>
  <span>R</span>
  <span>A</span>
  <span>I</span>
  <span>N</span>
  <span>B</span>
  <span>O</span>
  <span>W</span>
</h1>

You can see this working. What this does is the following;

  • Get every span inside the h1
  • Set a i variable to 0
  • For every span, add a color, then increment i by 1
Can O' Spam0

You need to loop through spans not the h1, and get the corresponding index for each span in the color array.

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
const rainbow = document.querySelectorAll('span');
rainbow.forEach((rain, i) => rain.style.color = colors[i])
<h1>
        <span>R</span>
        <span>A</span>
        <span>I</span>
        <span>N</span>
        <span>B</span>
        <span>O</span>
        <span>W</span>
    </h1>

userYBSN0

look at your for loop... every item in h1 is being assigned the same color because they are all being run on the same for loop (iterating through all i values 0-6 therefore setting all items in h1 to the color violet).

try this instead...

    const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
    const spans = document.querySelectorAll('h1 span');
    let count = 0;
    for (let rain in rainbows) {
       rain.style.color = colors[count];
       count += 1;
    }
CR1300
Related