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

Julianna Kahn
Julianna Kahn
20,700 Points
Posted by Julianna Kahn
Julianna Kahn
20,700 Points

I am totally confused by the different document element references

The last video talked about queries and nth-child. Does this challenge have anything to do with that?

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 ++) {
  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>
Carl Evison
Carl Evison
2,656 Points
Carl Evison
Carl Evison
2,656 Points

Nope, this challenge doesn't have anything to do with the :nth-child

This was the exact video I stopped and thought I better brush up on my html/css specifically css pseudo-classes

1 Answer

Steven Parker
Steven Parker
195,363 Points
Steven Parker
Steven Parker
195,363 Points

You're close, but the instructions want you to get the collection of "all list items in the <ul> element with the ID of rainbow". The selector used above just returns the single element that has that ID.

You can use a different selector that returns a whole collection, or keep this one and access a property that will return the elements inside the selected one.