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

Rachel Hutchings
Rachel Hutchings
4,293 Points
Posted by Rachel Hutchings
Rachel Hutchings
4,293 Points

querySelectorAll Javascript Challenge

As far as I know, the edit I made to this code did what the challenge needed me to do. (Make the variable listItems select all <li> items with the id rainbows. However, I keep getting an error about code that I didn't even touch and was already in challenge. (undefined in "listItems[i].style" ???)

Comparing it to the code in my workspaces it appears fine, so I am unsure of why this error is happening.

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

1 Answer

Martin Ellis
Martin Ellis
6,724 Points
Martin Ellis
Martin Ellis
6,724 Points

Hi Rachel,

Firstly, rainbow is an ID rather than a class so you should be targeting '#rainbow'. Secondly, you are trying to target the li items within the rainbow ul rather than the rainbow ul itself. So your code should look like this 

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

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

Hope this helped :)