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

Zachary Luke
Zachary Luke
6,045 Points

I feel I'm getting close to solving, but I keep getting an undefined error.

I know I've got the .getElementById selector correct, and I've got the children selector in the correct place, but it keeps saying there's an "undefined" error in the listItems[i].style.color portion of the code.

How can I solve this?

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

for(let i = 0; i < rainbow.children.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

Marcus Mayorga
Marcus Mayorga
Full Stack JavaScript Techdegree Student 5,626 Points

I think I see what you were trying to do here but the way the for loop was set up originally was fine because it cycled through the array of colors. Focus on the listItems constant by referring to a "collection."

I don't think you can use getElementById in this case. This got the job done for me:

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

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