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

yousif alyousif
yousif alyousif
2,322 Points
Posted by yousif alyousif
yousif alyousif
2,322 Points

can some one tell me please what I am doing wrong with my code?

i do not know why it is not accepting my code and giving me error this is what the challenge Task says: 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. can some one help me please ?

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>
js/app.js 
let listItems = document.querSelectorAll(`#rainbow`);
const colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
}

3 Answers

Stuart Wright
Stuart Wright
41,119 Points
Stuart Wright
Stuart Wright
41,119 Points

A few things:

  • You have a typo in querySelectorAll
  • It looks like you might have used backticks (`) rather than quotes (" or ').
  • You need to select the list items inside the element with rainbow id, not just the rainbow id.
let listItems = document.querySelectorAll("#rainbow li");
Kevin Vong
Kevin Vong
6,312 Points
Kevin Vong
Kevin Vong
6,312 Points

Thank you! The courses taught by Guil Hernandez are not easy to follow along with.

SP Prabhakar
SP Prabhakar
11,429 Points
SP Prabhakar
SP Prabhakar
11,429 Points

i think you are doing mistake with spelling of querySelectorAll(). you have written "querSelectorAll".

yousif alyousif
yousif alyousif
2,322 Points
yousif alyousif
yousif alyousif
2,322 Points

thanks for the replay problem been fixed :)