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

Posted by prasanth ats
prasanth ats
342 Points

We have some JavaScript code that will cycle over list items and apply colors from an array called colors. The code will

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.

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=document.GetElementsByTagName('li');
const colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
}
Rafael silva
Rafael silva
23,877 Points

1 - getElementsByTagName and NOT the (G)etElementsByTagName so on you g is on Upper case instead get, 2 - I prefer usin the querySelectorAll("li") for this . 3 - or you can use the getElementById("rainbow").

so on you have so many options for explore in your code, just like this I hope help yout, best regard

NSOFT doo Mostar
NSOFT doo Mostar
1,473 Points

You ignored absolutly Id of rainbow, I guess point is to get collection by Id...

Ashton Schneider
Ashton Schneider
3,193 Points

I'm confused. I'm getting a passing answer using: let listItems = document.querySelectorAll('#rainbow li');

and then provided code.

But we never loop through the list items, only the colors. Where is listItems[i] coming from?

3 Answers

Abhishek Shah
Abhishek Shah
14,286 Points
Abhishek Shah
Abhishek Shah
14,286 Points

More accurate would be the following. Since its explicitly mentioned to select all the li elements under ul having the id rainbow. 

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

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

Please do correct me if I am wrong!!

Carlos Marin
Carlos Marin
2,675 Points

Why does this not work?

let listItems = document.querySelectorAll('#rainbow');

Devin Bonser
Devin Bonser
10,058 Points
Devin Bonser
Devin Bonser
10,058 Points

You answer looks correct, but you capitalized get in "getElementsByTagName" by mistake. :)

Before:

         let listItems = document.GetElementsByTagName('li');

After:

         let listItems = document.getElementsByTagName('li');
Paul Janson
Paul Janson
Courses Plus Student 2,670 Points
Paul Janson
Paul Janson
Courses Plus Student 2,670 Points

This passes the challenge, and as Sean May said, it doesn't venture into material we haven't covered yet.

Sean May
Sean May
9,145 Points
Sean May
Sean May
9,145 Points

Thanks for the help on this one...I'll take Guil to task a little bit on this, though. At the point of this challenge, we haven't seen this kind of use of querySelectorAll to select a nested element. It makes sense, of course, but it's different from anything we've seen in the videos thus far.