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 Layth Qusai
Layth Qusai
1,393 Points

Would you mind helping me with the answer to this? and explain why?

I went back and watched all videos in this session but couldn't figure out what I'm missing here.

Cheers, Layth

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

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

2 Answers

Steven Parker
Steven Parker
231,008 Points
Steven Parker
Steven Parker
231,008 Points

The challenge says "The collection should contain all list items in the unordered list element with the id of rainbow." But the selector "#rainbow" selects the list itself and not the items.

You're very close, and with just a slight change to your selector you could return the items instead. This might be a good place for a descendant selector.

Layth Qusai
Layth Qusai
1,393 Points
Layth Qusai
Layth Qusai
1,393 Points

Awesome, thank you for pointing me in the right direction :)

Worked by changing to: let listItems = document.querySelectorAll('#rainbow li');