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 Andre Graca
Andre Graca
7,513 Points

Hey, this is asking me if I selected all 7 list items. and yes, all of them are displaying the right color, please help.

Hey, this is asking me if I selected all 7 list items. and yes, all of them are displaying the right color, please help.

js/app.js 
var listItems;
var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];
listItems = document.getElementById('rainbow');

for(var i = 0; i < colors.length; i ++) {
  listItems.children[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

Zaid Khan
Zaid Khan
12,769 Points
Zaid Khan
Zaid Khan
12,769 Points

Hi Andre Graca

For next time, I would recommend share whatever you tried, it will help you understand more about the problem.

In order to see the effect on all the li in the loop, you just need to use document.querySelectorAll.

Like this:

var listItems = document.querySelectorAll('li');