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 Quincey Hollman
Quincey Hollman
1,923 Points

The tutorial videos for this section did not make sense to me, I am totally lost as to what to do here.

The syntax is not clearly spelled out in the videos and I'm unsure about how to complete this task.

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>
Quincey Hollman
Quincey Hollman
1,923 Points

Please help me understand the necessary syntax for tags and proper use of document.querySelectorAll anything explained will help.

1 Answer

Megan O'Brien
.a{fill-rule:evenodd;}techdegree seal-36
Megan O'Brien
Treehouse Project Reviewer

Hello there!

So when you are using querySelector you can "grab" an element with their ID, their class, or the type of element.

In this case, it looks like you are trying to "grab" the ul (Unordered List) that has the id of rainbow to change the color of each li (list item).

In this case, I would refer to the HTML and see that the ul has an id of "rainbow".

Then in my code, would use querySelectorAll to grab the id with the special syntax for ID which is #. You are currently trying to grab a class named rainbow using the period.

Example of grabbing the ul section using querySelectorAll and using the id syntax:

var listItems = document.querySelectorAll('#rainbow');

querySelectorAll Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Also here is a cheat sheet I found of how you can make various selections and their syntax: https://guide.freecodecamp.org/css/tutorials/css-selectors-cheat-sheet/

I hope this helps!

Quincey Hollman
Quincey Hollman
1,923 Points

Yes this does help. Thank you for clarifying the differences between the class and id grabs. I tested the code and I'm still missing something about this code challenge. Simply refactoring the code to .querySelectorAll('#rainbow'); Is still not inputting a list that the for loop can run over.