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

Posted by Devesh Singh
Devesh Singh
5,267 Points

listItems = document.querySelectorAll("#rainbow"); This does not work, please help.

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

This does not work, please help.

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

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

2 Answers

Paul Scanlon
PRO
Paul Scanlon
Pro Student 26,724 Points
Paul Scanlon
Paul Scanlon
Pro Student 26,724 Points

Hey

Try grabbing the list items within #rainbow not just the list itself.

Happy coding

Paul

Steven Ang
Steven Ang
40,657 Points
Steven Ang
Steven Ang
40,657 Points

You are only targetting the ul element. You need to target all of the li inside the ul (#rainbow) tag. Then the loop will work.

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