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

Alhagie Jobe
Alhagie Jobe
8,632 Points

The for loop cycles over list items and applies a color to each item using the values stored in the colors array. For ex

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
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>

2 Answers

Steven Parker
Steven Parker
174,022 Points

The instructions say "The collection should contain all list items in the <ul> element with the ID of rainbow."

The selector used in the code here is setting the variable to the "rainbow" ul itself instead of the li items within it.

Hint: this might be a good place for a descendant selector or a direct child selector.

Marcelo Pereira
Marcelo Pereira
11,550 Points

i already do that and still tell: There was an error with your code: TypeError: 'undefined' is not an object (evaluating 'listItems[i].style')

Steven Parker
Steven Parker
174,022 Points

Your issue is probably earlier in the code. Try creating a new question where you can put your complete code and perhaps someone can help spot it.

Daven Hietala
Daven Hietala
8,033 Points

I was able to find the answer on this thread..

https://teamtreehouse.com/community/undefined-is-not-a-function-evaluating-documentgetelementsbyidrainbow

"dallas kelley on May 24, 2018 While document.getElementsByTagName('li'); works for this particular problem it wouldn't work if you had more than one list that had different IDs. For example document.getElementsByTagName('li'); would select all <li> tags in a list that may not need to be selected where as document.querySelectorAll("ul#rainbow > li"); will only select <li> tags inside the UL with the ID: rainbow."

Good luck!

Steven Parker
Steven Parker
174,022 Points

:warning: The solution suggested in that other question will work, but it has excessive specificity. When referring to an element by ID, you don't also need the tag name.