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
Rob Hudson
4,292 PointsJava Script Code Challenge: Select UL by ID rainbow
We have some JavaScript code that will cycle over list items and apply colors from an array called colors. The code will apply the first color to the first list item, the second color to the second list item and so on. But the code is not complete. On line 1 of app.js, set the variable listItems to refer to a collection. The collection should contain all list items in the unordered list element with the id of rainbow.
let listItems; const colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];
for(var i = 0; i < colors.length; i ++) {
listItems[i].style.color = colors[i];
}
I do not understand why
let listItems = document.querySelectorAll('#rainbow');
will not work, please help I cannot pass this challenge.
2 Answers
james south
Front End Web Development Techdegree Graduate 33,271 Pointsthat just selects everything with the id rainbow, which of course is just one thing. you can use CSS selectors, so just put what you would if you were trying to style the list items in the unordered list.
sumit shah
2,600 PointsLet me help with your confusion , i used both code " let listItems = document.querySelectorAll('#rainbow') as well "let listItems = document.getElementsByTagName<'li'>" in my code editor and check. My word on this as per by observation , when you use former one it selects all elements in <li> tag by id "rainbow as a collection so that the color array doesnot get to iterate over as per loop and all comments in <li> give only one color with "#C2272D" in short loop does not works. While when latter is used it helps to select each line in <li> tag and code can loop over which gives lines <li> with different color as per array , in short this works. Check for yourself , as i cannot post screen shot here. Hope this helps
Rob Hudson
4,292 PointsRob Hudson
4,292 PointsHey James! Wow, you are the only one who responded on my other post regarding this same question as well! Thanks for your input man I really appreciate it.
Now in case anyone is wondering I was able to make this work as follows
let listItems = document.getElementsByTagName('li');
Although to me it still seems like selecting the ID rainbow should work because rainbow is connected to the entirety of the UL? Hoping you can clear this up James.