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

mayank rai
mayank rai
491 Points
Posted by mayank rai
mayank rai
491 Points

Hi; I feel I have selected the correct code but the preview shows me an error for some reason.

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

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,269 Points
Steven Parker
Steven Parker
231,269 Points

The instructions say to select a collection, and the "collection should contain all list items".

You used a function that returns a collection, but the selector you gave it only targets the list itself. But you're halfway there, just expand the selector so it targets the list items within that list (hint: a descendant selector could be handy).

mayank rai
mayank rai
491 Points
mayank rai
mayank rai
491 Points

got it getElementsByTagName() Thank you Steve Parker

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

I was thinking you might just change the selector and keep the same function, but that's another effective solution.

Good job! :+1: