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

michael edmondson
michael edmondson
3,369 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.

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];    
<!DOCTYPE html>
    <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>
    <script src="js/app.js"></script>

1 Answer

Brendan Whiting
Brendan Whiting
Front End Web Development Treehouse Moderator 84,579 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.