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

Doron Geyer
Doron Geyer
Full Stack JavaScript Techdegree Student 5,330 Points

selecting a UL with an ID tag in javascript selectors having a hard time finding the solution.

the question states

The for loop cycles over list items and applies a color to each item using the values stored in the colors array. For example, the first color in the array ( #C2272D) is applied to the first list item, the second color (#F8931F) to the second list item, and so on. Complete the code by setting the variable listItems to refer to a collection. The collection should contain all list items in the <ul> element with the ID of rainbow.

I am unsure how to target the ul with an id tag in this instance.

I have tried listItems= document.querySelectorAll('ul , #rainbow'); listItems= document.querySelectorAll('ul#rainbow'); listItems= document.querySelectorAll('li');

etc but all of it seems to return the same error. Rewatched the video on queryselectors, but its really lacking in information and on the MDN side they dont have an example that matches this. It is straight forward to select multiple elements or target specific things but in this case I just cant figure out the syntax. Perhaps my brain is jus tired.

js/app.js
var listItems;
var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];
for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
}
listItems= document.querySelectorAll('ul #rainbow');
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>
Doron Geyer
Doron Geyer
Full Stack JavaScript Techdegree Student 5,330 Points

I blundered my way through this but im assuming my answer is incorrect.

var listItems;
var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];
for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
}

on line 3 i inserted in

listItems= document.querySelectorAll('li')

so that my code was

var listItems;
var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];
listItems= document.querySelectorAll('li')
for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    

this was marked as correct, but in the question they specifically ask to use the UL element with the id of rainbow. my workaround obviously only works because the HTML only contains one list.

2 Answers

KRIS NIKOLAISEN
PRO
KRIS NIKOLAISEN
Pro Student 49,701 Points

You are using the ul (by id) as part of the selection. But ultimately you want the list items. querySelectorAll returns a collection. If you had a collection of ul elements the code would apply the same color to all list items and would only iterate for the count of ul elements (in this case once). With a collection of list items you can apply styles to each list item individually.

KRIS NIKOLAISEN
PRO
KRIS NIKOLAISEN
Pro Student 49,701 Points

To select the list items for the ul with id=rainbow you can use a descendant selector. Here is an example:

div p {
  background-color: yellow;
}

The above selects all <p> elements inside <div> elements.

So for the challenge you would use:

var listItems = document.querySelectorAll('#rainbow li')
Doron Geyer
Doron Geyer
Full Stack JavaScript Techdegree Student 5,330 Points

HI Kris. thanks for the response. So Based on the question where they specify the UL element with a Rainbow ID should I not be using the UL to grab the element rather than the li?