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

Posted by geehun seng
geehun seng
1,705 Points

Help me please to find the error

I don't know where the code is error.

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.getElementId('ranbow');
const colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
}
Cheo R
Cheo R
37,150 Points
Cheo R
Cheo R
37,150 Points 
let listItems = document.getElementId('ranbow');

Should be rainbow.

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Yes, but there's more to it. See my answer below.

1 Answer

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

You have a couple of spelling errors: "getElementId" instead of "getElementById", and "ranbow" instead of "rainbow". But that's not the real issue. Even after fixing it, this only gets the list element itself. But the instructions say to get a collection that contains all the list items in the list.

You can either chain another function onto this one to return a collection of the items (li), or you could use a different function that can take a CSS-style selector argument and return the collection directly.