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

Ephraim J. Smith
Ephraim J. Smith
8,707 Points

Code works..."Bummer"

Not sure what answer they're looking for here..

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

Emmanuel C
Emmanuel C
6,919 Points

Hey Ephraim,

While your code is technically correct, they want you to use the children property of the ul element, when you assign it to listItems. That way you dont have to change the way they access each child inside the loop, with listItems[i] instead of listItems.children[i]

var listItems = document.getElementById('rainbow').children
Ephraim J. Smith
Ephraim J. Smith
8,707 Points

Awesomesauce. Thanks man! Happy New Year! -E