Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Selecting Multiple Elements

David Regel
seal-mask
.a{fill-rule:evenodd;}techdegree
David Regel
Full Stack JavaScript Techdegree Student 5,504 Points
Posted by David Regel
.a{fill-rule:evenodd;}techdegree
David Regel
Full Stack JavaScript Techdegree Student 5,504 Points

What is wrong with my code?

Task: We have some JavaScript code that will cycle over list items and apply colors from an array called colors. The code will apply the first color to the first list item, the second color to the second list item and so on. But the code is not complete. On line 1 of app.js, set the variable listItems to refer to a collection. The collection should contain all list items in the unordered list element with the id of rainbow.

I don't get why "let listItems = document.getElementById("rainbow");" is not working. Can someone help me out? Thank you

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

for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Rainbow!</title>
  </head>
  <body>
    <ul id="rainbow">
      <li>This should be red</li>
      <li>This should be orange</li>
      <li>This should be yellow</li>
      <li>This should be green</li>
      <li>This should be blue</li>
      <li>This should be indigo</li>
      <li>This should be violet</li>
    </ul>
    <script src="js/app.js"></script>
  </body>
</html>
js/app.js 
let listItems;
const colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

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

3 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

The instructions ask for a collection that "should contain all list items", but your code is selecting the list itself as a single element.

Hint: the "children" property of a list element refers to a collection containing all of its list items.

David Regel
seal-mask
.a{fill-rule:evenodd;}techdegree
David Regel
Full Stack JavaScript Techdegree Student 5,504 Points
David Regel
.a{fill-rule:evenodd;}techdegree
David Regel
Full Stack JavaScript Techdegree Student 5,504 Points

I have to admit that I'm not sure how to work with the "children" property here.

I fixed my code in this way:

document.querySelectorAll("#rainbow, li");

Is this the way that you are reffering to? if not, could you show me how you would do it?

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

That's perhaps an even better solution, except that the selector should not have a comma in it.

What I was hinting at would look like this:

let listItems = document.getElementById("rainbow").children;
Fabian Forsström
Fabian Forsström
7,978 Points
Fabian Forsström
Fabian Forsström
7,978 Points

As I understand it, correct me if I am wrong, you write like you are selecting a HTML element with CSS. 

#rainbow li {
  color: purple;
}

The css above is targeting the ID of Rainbow and selecting all the child li tags within. 

let listItems = document.querySelectorAll("#rainbow li");

And the exact same way in JavaScript you can pass "#rainbow li" into the selector.

Joshua Connor
Joshua Connor
7,214 Points

let listItems = document.querySelectorAll("#rainbow > li");

This also worked, The Bummer prompt was not very helpful. The problem showed a link to MDM to use listItems.children.[i].style.color = colors[i]; in the for loop which had the same result for me but the program did not agree that I had selected all seven list items. Yet, all had changed color.

Does this method scale better ("#rainbow > li")? Meaning is there some reason like BigO or otherwise the ("#rainbow > li"); section of code passes.

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Using "children" in the loop takes care of coloring the items but it does not satisfy the challenge requirement of "setting the variable listItems to refer to a collection... [of] all list items..."

Joshua Connor
Joshua Connor
7,214 Points
Joshua Connor
Joshua Connor
7,214 Points

Perhaps then the code challenge should not link to this MDN as this was the source of confusion for me.

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

You might want to submit a suggestion to the Support staff.