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

Query Selectors gone wrong

I don't know what's wrong here.

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 = 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];    
}
Julian French
Julian French
3,257 Points

You're welcome. I hope that works for you.

Yes it did. Thank you!

1 Answer

Julian French
Julian French
3,257 Points

Hey! I would say it's better to do:

document.querySelectorAll('li');

Using "#rainbow" in your querySelectorAll wouldn't work because the # points to an id, and ids are supposed to be unique - only one tag should have a specific id. Now, if you wanted each li item to have the same class, you could make each li like this:

<li class="rainbow">This should be red</li>
<li class="rainbow">This should be orange</li>

That would allow you to select all of the li items that have the class of rainbow. So, the JavaScript would look like this:

document.querySelectorAll('.rainbow');

Thank you so much!