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 Johnny Baltazar
Johnny Baltazar
2,504 Points

Issue with setting variable listItem to a collection.

I'm having an issue with setting the variable listItems to a collection. I have tried various types of collection methods but I cannot figure out what I am entering in incorrectly. Can someone please help with figuring out what I am missing.

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>

1 Answer

jb30
jb30
44,805 Points
jb30
jb30
44,805 Points

document.querySelectorAll("rainbow"); correctly sets up a collection for everything that has the html tag <rainbow>. Since rainbow is not meant to be an html tag and there are no such tags in the html file, your code correctly sets up an empty collection.

The challenge wants you to select the list items of the <ul> element which has the id rainbow. If you wanted to specify the <ul> element with the id rainbow, you would use ul#rainbow or just #rainbow since ids should be unique on each page. To specify the list items of any unordered list, you would use ul li.

Johnny Baltazar
Johnny Baltazar
2,504 Points

Thank you jb3o for the help and insight. I was able to complete the challenge by selecting the li list items with document.getElementsByTagName("li");. I thought that I already tried this route but maybe not or I missed something. Either way, I was able to complete the challenge. Thanks again.