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

Michael Niers
Michael Niers
7,560 Points
Posted by Michael Niers
Michael Niers
7,560 Points

Change colors of 'rainbow'

I don't know, what to do. How do I get the 'rainbow'-items and change its colors?

js/app.js 
var listItems = document.getElementById('rainbow');

for(var i = 0; i < listItems.length; i ++) {
  listItems[i].style.color = colors[i];   
}

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>

3 Answers

Richard Verbraak
Richard Verbraak
7,739 Points
Richard Verbraak
Richard Verbraak
7,739 Points

You were almost there! You selected the ul with the ID of rainbow. Not the list items themselves.

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

or to be more specific

var listItems = document.querySelectorAll("#rainbow li");

You can also get it's parent and the nested children inside of it with the code below.

var listItems = document.getElementById("rainbow").children;
Michael Niers
Michael Niers
7,560 Points
Michael Niers
Michael Niers
7,560 Points

Thanks for your reply. I changed it but I get still an error

Michael Niers
Michael Niers
7,560 Points
Michael Niers
Michael Niers
7,560 Points

It says: There was an error with your code: TypeError: 'undefined' is not an object (evaluating 'colors[i]')

My code:

var listItems = document.getElementById("rainbow").children;

for(var i = 0; i < listItems.length; i ++) { listItems[i].style.color = colors[i];
}

var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) { listItems[i].style.color = colors[i];
}

Richard Verbraak
Richard Verbraak
7,739 Points
Richard Verbraak
Richard Verbraak
7,739 Points

You are declaring the variable colors AFTER running the loop. That's why it's saying undefined is not an object. It isn't declared before. You just have to store the element with the ID of rainbow and it's children.

It should look exactly like this.

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

for(var i = 0; i < listItems.length; i ++) {
 listItems[i].style.color = colors[i];
}