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

Dane Goodman
Dane Goodman
3,427 Points

Everything seems to be the right color, but it's still asking if I selected all 7 items.

All of the list items are the color they are supposed to be, and I did a bug check and put in an alert to show me the inner HTML of all of the list items that I had selected in my collection, and every single color came up in the alert, and yet it is still saying that I don't have all seven items selected, so I am a little bit confused.

js/app.js
var listItems = document.getElementById("rainbow");
var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) {
  alert(listItems.children[i].innerHTML);
  listItems.children[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

Missy Kailet
Missy Kailet
3,916 Points

This is minor, but the instructions say:

Complete the code by setting the variable listItems to refer to a collection.

You aren't assigning the collection to the variable listItems.

Dane Goodman
Dane Goodman
3,427 Points

I finally got it, thank you. I figured out two other solutions before they finally accepted the third solution, haha. So particular.