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

ikzath KALANTHAR
ikzath KALANTHAR
1,771 Points

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>

1 Answer

KRIS NIKOLAISEN
PRO
KRIS NIKOLAISEN
Pro Student 51,749 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.