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

Isis van der Plas
Isis van der Plas
13,445 Points
Posted by Isis van der Plas
Isis van der Plas
13,445 Points

why is this incorrect? I wrote my code as described in the video.

my answer is:

const 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];
}

but it's not rated correct, and it won't work. I'm at a loss because I feel I did exactly what the video previous to the exercise described.

Thanks in advance

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 
const 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

andren
andren
28,558 Points
andren
andren
28,558 Points

It's incorrect because it is not selecting the right thing. The instructions for this challenge states:

The collection should contain all list items in the unordered list element with the id of rainbow.

#rainbow is the id of the ul element, but the task is not just to select the ul itself but to select all of the li list item elements nested within it.

So your answer is halfway there, you select the right ul element but now you have to select the li elements nested within it. The easiest way to do that is using a descendant selector which you should have some experience with if you have gone though any of the basic CSS courses.

As a reminder the descendant selector works by typing in the names of multiple selectors separated by a space, the last element you specify is the one that is selected but only if it is nested within the other elements specified.

So if I for example wanted to select let's say a elements nested within an element with an id of example the selector would look like this:

#example a

Using that as a template you should be able to figure out the proper selector that this task is looking for.

Edit: Added info about how the descendant selector works in case you forgot.