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

Michael Niers
Michael Niers
7,560 Points

Change colors of 'rainbow'

I don't know, what to do. How do I get the 'rainbow'-items and change its colors?

js/app.js
var listItems = document.getElementById('rainbow');

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

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>

3 Answers

Richard Verbraak
Richard Verbraak
7,688 Points

You were almost there! You selected the ul with the ID of rainbow. Not the list items themselves.

var listItems = document.querySelectorAll("li");

or to be more specific

var listItems = document.querySelectorAll("#rainbow li");

You can also get it's parent and the nested children inside of it with the code below.

var listItems = document.getElementById("rainbow").children;
Michael Niers
Michael Niers
7,560 Points

Thanks for your reply. I changed it but I get still an error

Michael Niers
Michael Niers
7,560 Points

It says: There was an error with your code: TypeError: 'undefined' is not an object (evaluating 'colors[i]')

My code:

var listItems = document.getElementById("rainbow").children;

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

var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

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

Richard Verbraak
Richard Verbraak
7,688 Points

You are declaring the variable colors AFTER running the loop. That's why it's saying undefined is not an object. It isn't declared before. You just have to store the element with the ID of rainbow and it's children.

It should look exactly like this.

var listItems = document.getElementById("rainbow").children;
var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

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