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

Nicholas Smay
Nicholas Smay
Full Stack JavaScript Techdegree Student 10,493 Points

I can't figure out what's wrong with my code for the life of me

I keep getting an error when checking my work. Can someone please point me in the right direction, I've looked over it a million times, and I feel like I'm going crazy. Thanks!

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>
js/app.js
const listItems = document.getElementsById("rainbow");
const colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(let i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
}

1 Answer

Aakash Srivastav
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,610 Points

Hey Nicholas Smay , in order to select all <li> , and for that you have to use document.querySelectorAll('li') method
After then , you can iterate over all the <li> items individually and make changes .
You can write your code like this:

var listItems = document.querySelectorAll("li");    // Selecting all the 'li'
var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i++) {
  listItems[i].style.color = colors[i];    // listItems contains array of 'li' , so iterate over each 'li' and make changes to them    
}

Hope it helps :)