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
ja5on
10,338 Pointsprevious to this we have been programming in the console but here we can't, i dont understand how to begin with this
previous to this we have been programming in the console but here we can't, i dont understand how to begin with this it's not in context to how we've previously been programming in the tutoring sessions.
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];
}
<!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
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 PointsHi jasonj7,
In this challenge you're being asked to assign the variable listItems the appropriate value.
Probably the easiest way would be to change the line to:
var listItems = document.querySelectorAll()
// in the parenthesis you would enter the right selector to return all the <li> elements
// that are children (direct descendants) of the <ul> element with an id of rainbow
There are several ways to select the proper elements, so you don't have to start with the example I've written above, but if you take a shot at it and you're still not able to figure it out let me know.
Busra Tokuc
7,444 PointsHi, You should select the element that you want to manipulate. You can use several different methods for it. In this challenge, you try to select multiple elements. So you can use querySelectorAll() method like this.
var listItems = document.querySelectorAll('#rainbow li');
ja5on
10,338 PointsThank you for your reply
ja5on
10,338 Pointsja5on
10,338 PointsBrandon White Hi!
I lost my thoughts for a bit with this one. But yeah so obvious when i think about it. Just the lack of console threw me for a minute.
So could I write var listItems = document.querySelectorAll("#rainbow li");
and could I also write var listItems = document.getElementById('rainbow').children;
Your right there's several ways although i like ("#rainbow li") Its reminds me more of CSS and would you say this part of the course really requires some knowledge about CSS selectors.
As always thanks for your replies.
Brandon White
Full Stack JavaScript Techdegree Graduate 35,771 PointsBrandon White
Full Stack JavaScript Techdegree Graduate 35,771 PointsYes. Both of those examples would work.