The for loop cycles over list items and applies a color to each item using the values stored in the colors array.

I know they mentioned going through teachers notes if we WANTED a more in=depth look at this. However. I reviewed all the videos when I encountered this challenge and not once were we introduced to using .children to create a list of objects. I had to google and find this page to get the answer. Wish they would have given us a challenge that we were prepared to complete without cheating.

Just in case anyone else is still finding this thread here is the full JavaScript code below.

var listItems = document.getElementById('rainbow').children;
var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
}

Best, Cameron Sprague

Hi mo,

Your code should look like this:

var listItems = document.getElementsByTagName('li');
var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
}

The challenge is specifically testing the ability to work with a collection using the concept of children. As such, to pass the challenge you need to explicitly select the li elements that are children of the ul with the id "rainbow". Here is the clue text from the challenge:

The collection should contain all list items in the <ul> element with the ID of rainbow.

We can do this by selecting the element with the specified id, and then modifying that selection to refer to its children:

var listItems = document.getElementById('rainbow').children;

Cheers,

Alex

you could have done this in a mutiple of ways because some element selectors do function the same. It just depends on preference! The key to getting the answer correctly are:

1. defining the variable 'ListItems' using const
2. setting listItems to the global variable document
3. and using .childrent element selector before the semicolon (;)

Your choice of JS element selector is up to your preference...

Here is my answer:

const listItems = document.querySelector('#rainbow').children;

Actually, the twist here is not with the code itself as this challenge could be addressed in multiple ways as shown below. It's just that you should declare the var listItems and your code before the "for loop", otherwise you would get this error.

In other words, the system exits the loop and then works on your code which has some unidentified objects. However, I think it should work fine with other text editors :)

Bummer: There was an error with your code: TypeError: 'undefined' is not an object (evaluating 'listItems[i]').

Correct Answers: var listItems = document.querySelector('#rainbow').children; var listItems = document.getElementById('rainbow').children; var listItems = document.getElementsByTagName('li');

just write any of the correct answers anywhere above the for loop (to be more specific; line 1 by declaring value within or anywhere between lines 1-3).

Hope that helps.

Regards, H

Same thing I watched all the videos but did not check the teacher notes, since this is the first time they put on a challenge with the solution not on the video.

Anyways, still thankful for teamtreehouse active community of students. :)

Where does .children come from? And what does it mean?

I agree this challenge was a little off topic from the videos i was a little lost and thrown off with this one. don't get how somehow landed on the .child part either don't remember that being explained

I use below code, can get the good result, but the quiz said: Bummer: There was an error with your code: TypeError: 'undefined' is not an object (evaluating 'listItems[i]') my code as blew: //var listItems; var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

const listItems=document.querySelectorAll('li');

for(var i = 0; i < colors.length; i ++) { listItems[i].style.color = colors[i];
}

the browser shows the text below with the correct colors: This should be red This should be orange This should be yellow This should be green This should be blue This should be indigo This should be violet

This is the code I used to pass the challenge:

var listItems = document.querySelectorAll('#rainbow li'); var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) { listItems[i].style.color = colors[i];
}