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 Joakim Rylander
Joakim Rylander
4,821 Points

Managed the task, yet task won't pass me. Why? Got the result the task wanted from me.

I did what the task wanted from me. Each li item has now the corresponding color from the array, yet the task won't approve me. I am confused now. Can anyone explain this to me?

js/app.js 
var listItems = document.querySelector("#rainbow");
var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) {
  listItems.children[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>

3 Answers

Unsubscribed User
.a{fill-rule:evenodd;}techdegree
Unsubscribed User
Front End Web Development Techdegree Student 33,900 Points

Hi Joakim,

you are very close...

And actually the way you did it works - it just is not how it is asked to be solved. ;-)

The task is to set the variable listItems to refer to a collection immediately, so you don't have to use "children" further down below...

So you want to use querySelectorAll, not querySelector, and then you have to select the list items after selecting "#rainbow". Remember you can chain selectors, like for example:

var yourVariable = document.querySelectorAll("#main-text p span");

Can you figure it out with this hint? ;-)

Let me know if not!

Blessings from Berlin and happy java-scripting, Nils

PS: If my answer helped you or solved your issues, please upvote my answer and/or mark it as "Best answer" (so people browsing the community forum know your issue is solved)

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

This is a very interesting challenge. And it took me a few tries (and I've done the course ;) )

As Nils suggests there's a few ways you can do the challenge but one way that the challenge is looking for.

Try selecting the element with as specific a selector as possible, just as you might do with CSS. And turn list items into a collection in the same way as you're trying to traverse the list items with the children method.

Joakim Rylander
Joakim Rylander
4,821 Points
Joakim Rylander
Joakim Rylander
4,821 Points

Yeah managed to figure it out. Didn't realize one could select tags like that, that's one I struggled a bit :)