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

Zenzi Ali
PLUS
Zenzi Ali
Courses Plus Student 2,412 Points
Posted by Zenzi Ali
Zenzi Ali
Courses Plus Student 2,412 Points

I don't understand what I'm doing wrong. I keep rewatching the tutorial...I'm stuck here.

I get an error message, but I don't know why.

js/app.js 
var listItems = document.querySelectorAll('# rainbow');
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>

1 Answer

Brandon White
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points
Brandon White
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 Points

Hi Zenzi,

There are two things that you'll want to correct to complete the challenge.

The first is that you have to remove the space between # and rainbow. '#rainbow' means select the element with an id of rainbow. The JavaScript interpreter doesn't know how to interpret '# rainbow'. So that's the first thing to work on.

The second item to address is this... the challenge asks that you store a collection of the list items in the <ul> element with an id of rainbow. So you're not actually targeting the <ul> element with an id of rainbow using the #rainbow selector, you have to make sure you target the <li> elements nested within the <ul> element with an id of rainbow.

Here's a link that discusses CSS selectors (pay close attention to the ID selectors and the Descendant combinator selectors).

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors