JavaScript JavaScript and the DOM Getting a Handle on the DOM Selecting Multiple Elements

michael edmondson
michael edmondson
3,059 Points

Im super lost with this right now

The for loop cycles over list items and applies a color to each item using the values stored in the colors array. For example, the first color in the array ( #C2272D) is applied to the first list item, the second color (#F8931F) to the second list item, and so on. Complete the code by setting the variable listItems to refer to a collection. The collection should contain all list items in the <ul> element with the ID of rainbow.

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

for(let i = 0; i < colors.length; i ++) {
  listItems[i].style.color = rainbow[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

Brendan Whiting
MOD
Brendan Whiting
Front End Web Development Treehouse Moderator 84,090 Points

You're using rainbow where you should be using colors, that's the list of colors.

Rainbow is the <ul> which has that id and contains all the list items. I think what they wanted you to do is use a selector that included rainbow, something like document.querySelectorAll('#rainbow li'); which would grab specifically the list items inside the #rainbow element. But as it happens, the way you selected the list items is going to work as well for this challenge.