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

Guerilla Gorilla
Guerilla Gorilla
1,770 Points
Posted by Guerilla Gorilla
Guerilla Gorilla
1,770 Points

Unable to select based on rainbow ID

In Challenge Task 1 of 1 in "Javascript & the DOM", I'm trying to select multiple items based on <ul id = "rainbow"> using let listItems = document.querySelectorAll["#rainbow"];

The test responds back with Bummer! Can you point me in the right direction?

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

2 Answers

james south
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,271 Points
james south
.a{fill-rule:evenodd;}techdegree seal-36
james south
Front End Web Development Techdegree Graduate 33,271 Points

you are only getting the unordered list, not the list items inside. you need to modify your selector line a little to reach into the ul and return a list of the list items. you can chain method calls, like myObject.methodOne().methodTwo().

Brian Pedigo
Brian Pedigo
26,783 Points
Brian Pedigo
Brian Pedigo
26,783 Points

In order to get the li tags you'll have to add it your querySelectorAll call 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];    
}

I hope this helps happy coding!

Guerilla Gorilla
Guerilla Gorilla
1,770 Points
Guerilla Gorilla
Guerilla Gorilla
1,770 Points

Thanks James and Brian. Feel like there should have been a way to get to the <ul> child (<li>) and don't think the video explained this well enough. Feel like I may have missed something.

Thanks again to both of you for helping so fast!