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

Ceil-Ian Maralit
Ceil-Ian Maralit
Front End Web Development Techdegree Graduate 19,420 Points

Query Selectors gone wrong

I don't know what's wrong here.

<!DOCTYPE html>
    <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>
    <script src="js/app.js"></script>
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.

1 Answer

Julian French
Julian French
3,257 Points

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


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: