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

Dan Warren
Dan Warren
9,125 Points
Posted by Dan Warren
Dan Warren
9,125 Points

None of what I've learned in the previous video is working here, what am I supposed to do?

I've been trying everything from getElementsById to querySelectorAlland none of the videos I've watched up to this point is telling me anything that helps with this problem. What am I missing? How am I supposed to complete this code?

js/app.js 
var listItems = document.querySelectorAll("rainbow");
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>
Abdi Salad
Abdi Salad
8,078 Points
Abdi Salad
Abdi Salad
8,078 Points

The way I would do it give each of the li elements the same class name and instead use the >Document.getElementsByClassName() instead of what you're using, the Document.querySelectorAll(). The solution I >mentioned should work, but probably not what you're looking for.

1 Answer

Tobias Kloy
Tobias Kloy
3,655 Points
Tobias Kloy
Tobias Kloy
3,655 Points

You have to select the list-items in your querySelector, not "rainbow"-ul which is around.

By the way: If you want to access something by ID you would use "#rainbow". 

 var listItems = document.querySelectorAll("#rainbow"); // Everything will be colored #C2272D

Hope it helps!