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

do we have to create two seperate for loops for the colours and listings respectively ? thanks

do we have to create two seperate for loops for the colours and listings respectively ? thanks

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 ++) {
}

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

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,287 Points

For the challenge you will only be modifying the first line of code. You won't change the loop at all. Make sure you select a collection of list items. You are currently only selecting the ul - a single element. You want to select the list items within that ul.

thanks kris (;