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

Question

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>

Answer 1 · 2020-07-14T20:22:16Z

July 14, 2020 8:22pm

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

Welcome to the Treehouse Community

Looking to learn something new?

Zenzi Ali

Zenzi Ali

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

1 Answer

Brandon White

Brandon White