Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Selecting Multiple Elements

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

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.

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.