
Alasdair Marchant
4,592 PointsHi 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?
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];
}
<!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

Abbey Tipton
14,408 PointsHi 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.

Adam Pengh
27,516 PointsYou want to select all of the <li> elements within the <ul id="rainbow"> element.
var listItems = document.querySelectorAll('ul#rainbow > li');

MAURO ALFREDO MORALES LIMON
338 PointsTry 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]; }