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

Alasdair Marchant
Alasdair Marchant
4,592 Points

Hi I can't work out this challenge. I've written: var listItems = document.querySelector("#rainbow.children");

What is the solution to this challenge and why?

js/app.js
var listItems = document.querySelector("#rainbow.children");
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

Adam Pengh
Adam Pengh
28,635 Points

You want to select all of the <li> elements within the <ul id="rainbow"> element.

var listItems = document.querySelectorAll('ul#rainbow > li');
Abbey Tipton
Abbey Tipton
16,846 Points

Hi there, the correct answer should be:

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

because you need to select all the elements (querySelectorAll) and you need to select all of the li items under the ul with the id of rainbow.

Try with this =)

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

for (var p = 0; p <= List.children.length - 1; p++) { List.children[p].style.color = colors[p]; }