Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Selecting Multiple Elements

Posted by treehousecoder20
treehousecoder20
4,225 Points

Javascript DOM

I am on a task challenge in Javascript and the DOM module. Here is instruction and below is my code. It saying that there is errortype undefine to this and I couldn't figure what's wrong. Can someone please help see what I am doing wrong? Thank you.

instruction: 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.

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

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

Heidi Fryzell
seal-mask
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 25,178 Points
Heidi Fryzell
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 25,178 Points

Hi treehousecoder20,

The directions ask for "The collection should contain all list items in the <ul> element with the ID of rainbow."

So it wants you to select the "list items" with the ID of "rainbow". You can't just select the rainbow ID.

So if you add "li" like this it should work. This is saying to select all "li"s with the ID of rainbow.

var listItems = document.querySelectorAll('#rainbow li');

You shouldn't need to touch the for loop at all to pass the challenge.

Hope this helps and happy coding!

treehousecoder20
treehousecoder20
4,225 Points

Heidi, the codes are working now. I did try that similar codes before but I put var listItems=document.querySelectorAll ("#rainbow, li") and var listItems=document.querySelectorAll ("#rainbow", "li") and that didn't work. Thank you much for your help.

treehousecoder20
treehousecoder20
4,225 Points
treehousecoder20
treehousecoder20
4,225 Points

Correction: Actually I have this:

listItems[i].style.color = colors[i];

and not this:

listItems[i].style.color = [i];

but all of them do not run properly. Thank you.