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

Indu khan
Indu khan
169 Points
Posted by Indu khan
Indu khan
169 Points

Why is this showing error?

Why is this showing error? HELP

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 = 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];    
}

2 Answers

aapo
aapo
2,677 Points
aapo
aapo
2,677 Points

You are using a class selector '.' Instead of an id selector '#'. Since there is no class rainbow then listItems is empty, and when you try to change the color in the for loop it throws the error.

Hope this helped! :)

Edit: forgot to mention you'll want to access the individual list items

Abhijit Das
Abhijit Das
5,022 Points
Abhijit Das
Abhijit Das
5,022 Points

you need to choose the global variable first such as document and after that you could select an element with an id selector. Use '#' instead of '.' and you need to select all li elements; therefore you need to mention that after your rainbow ID in your querySelectorAll method