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

Ryan Whitney
Ryan Whitney
Full Stack JavaScript Techdegree Student 3,683 Points

Rainbow effect on text is working however still getting typeerror undefined in listItems[i].style, stuck?

Uncertain what the error is here, desired effect is happening but looks as though something is wrong with the for loop which I can't see, appreciate the help - thank you!

js/app.js
var listItems = document.querySelectorAll('#rainbow');
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 id="rainbow">This should be red</li>
      <li id="rainbow">This should be orange</li>
      <li id="rainbow">This should be yellow</li>
      <li id="rainbow">This should be green</li>
      <li id="rainbow">This should be blue</li>
      <li id="rainbow">This should be indigo</li>
      <li id="rainbow">This should be violet</li>
    </ul>
    <script src="js/app.js"></script>
  </body>
</html>

2 Answers

Dmitry Polyakov
Dmitry Polyakov
4,393 Points

You need to select a ul with the id of 'rainbow' and then access all its children by appending .children at the end

anthony amaro
anthony amaro
8,139 Points

hello ryan you just missing the li.

document.querySelectorAll('#rainbow li');

i hope this solves your issue