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

Jonas Wu
Jonas Wu
10,201 Points

The code can run but i got the Bummer"Did you select all 7 list items?"

Hello all,

You can see the list items get the 7 colors. But it says I didn't select all the item. Could anyone give me some hints?

thank you :)

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

for(let i = 0; i < colors.length; i ++) {
  listItems.children[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>

2 Answers

Jonas Wu
Jonas Wu
10,201 Points

Hello guys,

I made some change, and it passed in the end:

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

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

Could anyone tell me what's the difference between these 2 way of coding? Thanks !

Justin Horner
STAFF
Justin Horner
Treehouse Guest Teacher

Hello Jonas,

Great job on finding a solution to the challenge! I believe the reason the challenge isn't passing is due tolistItems being set to the ul instead of a collection. You should only have to modify the first line to get the challenge to pass. Try setting it to something like this:

var listItems = document.querySelectorAll('ul li');
...

I hope this helps.