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

Nouh Ahmed
Nouh Ahmed
7,085 Points
Posted by Nouh Ahmed
Nouh Ahmed
7,085 Points

Code challenge

I CAN'T FIGURE OUT THE ERROR TYPE 'UNDIFINED'

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>
js/app.js 
let listItems = document.querySelector('#rainbow');
const colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

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

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! You're very close here. But the problem is in your selector.

Your listItems variable is not selecting what you think it should. After the query, it should contain a collection of list items. But right now, it just contains one item. It contains an unordered list with the id "rainbow". This is what is producing the error. Because it's a single item and not a collection, it can't be accessed with index subscripting. What it should be selecting is all list items within the unordered list with the id "rainbow". Remember that we can use querySelectorAll to return a collection of items. When this collection is returned and assigned to listItems then we can access the individual elements with the index.

I believe you can get it with these hints, but let me know if you're still stuck! Good luck! :sparkles:

Nouh Ahmed
Nouh Ahmed
7,085 Points
Nouh Ahmed
Nouh Ahmed
7,085 Points

Thanks for the help, but i am still stuck even i used querySelectorALL(). Here is my code.

let listItems = document.querySelectorAll('#rainbow'); const colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

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

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! Again, you're close, but this is still a symptom of the same problem. You are selecting one single item. An unordered list. But you're supposed to be selecting the list items inside that unordered list. Take a look:

let listItems = document.querySelectorAll('#rainbow li');

This line will select the element with the id "rainbow" and all list items inside it. Which in this case, is seven elements. Those will be returned as a collection which you can then access with the index.

Hope this clarifies things! :sparkles: