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 Getting a Handle on the DOM Select by Tag Name

Ryan Woods
Ryan Woods
3,682 Points
Posted by Ryan Woods
Ryan Woods
3,682 Points

im not sure what it is specifically asking? I had to look deep into the internet to find the solution

im not sure what it is specifically asking? I had to look deep into the internet to find the solution after playing with it for 30+ mins. i had to walk away and come back to it after a while. HELP

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

for(var i = 0; i < colors.length; i++) { 
  listItems[i].style.color = colors[i];
}
index.html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript and the DOM</title>
  </head>
  <body>
    <h1>My List</h1>
    <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="app.js"></script>
  </body>
</html>

1 Answer

Caleb Kemp
Caleb Kemp
12,754 Points
Caleb Kemp
Caleb Kemp
12,754 Points

Now if you changed your code just a little bit like so,

this

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

to this

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

it would have the desired functionality of changing the colors, (you can see this by using the show preview button in the challenge). however, that is not how they wanted you to solve it.

In the tutorial before this challenge, Guil shows you exactly how he wanted the problem solved at minute 7:40. The code he writes looks like this

let items = document.getElementsByTagName('li');

to pass the challenge, you just need to make your variable listItems equal to what Guil had there.

These challenges can be confusing at times, and it's a good idea to ask for help if you are stuck for a while on a problem. The reason why

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

doesn't pass is because the challenge specifies that the variable has to point to an HTML collection. querySelector returns a nodeList not an HTML collection. Hope that helps, let me know if it gives you any more trouble :smile: