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 ja5on
ja5on
10,338 Points

Cannot get past this challenge

In the challenge there's an Id so I've selected the Id but still doesn't return the right result.

js/app.js 
var listItems = document.getElementById("rainbow li");
var 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>
ja5on
ja5on
10,338 Points

Is it because I'm using getElementById which only selects one element and not the child of rainbow? So would I have to use querySelector to select the element under rainbow? The li?

My tech speak isn't the best please allow for that thanks

would this be correct:- querySelectorAll because their are many <li> elements or tags, so first I need to select rainbow which is an id (id = #) also select many li tags, would this be then document.querySelectorAll("#rainbow li"); ?

1 Answer

Heidi Fryzell
seal-mask
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 25,178 Points
Heidi Fryzell
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 25,178 Points

Hi Jason,

You are definitely on the right track.

var listItems=document.querySelectorAll("li");

This is the code I used to pass the challenge. Yes, you need to use "document.querySelectorAll" instead. I think this enables you to loop through a "collection" of items.

I am not 100% sure why you can't use "rainbow li". That seems like it should work too. It seems like a more specific way to select the list items. But since there is only one list in the html the "li" by itself works.

I hope this is helpful and Happy Coding!