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
Wadzanai Mufunde
Courses Plus Student 9,174 PointsOn line 1 of app.js, set the variable listItems to refer to a collection. The collection should contain all list items i
I keep getting an error for this question. Can someone help?
<!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>
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];
}
2 Answers
Jennifer Nordell
Treehouse TeacherHi there! There are a couple of problems here. First, rainbow is an ID. But secondly, even if it selected the element that had the ID of "rainbow" it would only return one item. That's the unordered list. It wants you to select the list items inside that unordered list.
There's a couple of different ways that you can do this, but one is much easier than the other. Because the list items in that unordered list are the only ones on that page, you don't even really need to specify the id. However, if you want to be more specific, you can select the id and then specify the element inside the id you want to select.
I think you can get it with these hints, but let me know if you're still stuck!
Wadzanai Mufunde
Courses Plus Student 9,174 PointsI tried:
let listItems = document.getElementsByTagName("rainbow");
const colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];
for(var i = 0; i < colors.length; i ++) {
listItems[i].style.color = colors[i];
}
But that gave me and errror:
Wadzanai Mufunde
Courses Plus Student 9,174 Pointsjavascript let listItems = document.querySelectorAll('#rainbow li')
Jennifer Nordell
Treehouse TeacherThere you go! The only thing I see incorrect there is the word "javascript" and you're missing a semicolon. But otherwise, that line passes for me.
let listItems = document.querySelectorAll('#rainbow li');
Wadzanai Mufunde
Courses Plus Student 9,174 PointsWadzanai Mufunde
Courses Plus Student 9,174 PointsThe error says: There was an error with your code: TypeError: 'undefined' is not an object (evaluating 'listItems[i].style')