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

Hassan Noueilaty
Hassan Noueilaty
3,713 Points

'undefined' is not a function (evaluating 'document.getElementsById('rainbow')

Hello!

I'm having some trouble on this challenge task. Any help would be greatly appreciated.

Thanks!

let listItems = document.getElementsById('rainbow');
const colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
}
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.getElementsById('rainbow');
const colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) {
  listItems[i].style.color = colors[i];    
}
Aj Broman
Aj Broman
2,668 Points

There can only be one unique ID. Not plural:

document.getElementById();

10 Answers

Aj Broman
Aj Broman
2,668 Points

As I commented above, it's document.getElementById('');

However this exercise is asking for multiple things, your best bet here is to target by tagname

document.getElementsByTagName('li');

This will fix your errors, make sure to check all the different methods available to you :) GL learning

Hassan Noueilaty
Hassan Noueilaty
3,713 Points

That worked! I'm still a little unsure why but I'll rewatch the videos.

Thanks for your help.

Aj Broman
Aj Broman
2,668 Points

let listItems = document.getElementsByTagName('li'); // will give listItems all of your lis const colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

for(var i = 0; i < colors.length; i ++) { listItems[i].style.color = colors[i]; //here is where it's looping through your lis with [i] and applying .style.color }

I'm pretty new to this stuff too, and I'm actually mid-way into DOM Manipulation myself

great, it worked for me too. That was a little confusing treehouse.

Jose Gutiérrez
Jose Gutiérrez
9,370 Points

Besides the typo, you are trying to get many elements (li) from a HTML element so the List Items[i] will be undefined because listItems only contains one element: the ul. Try with getElementsByTagName('li');

let listItems = document.getElementsByTagName('li'); console.log(listItems); const colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];

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

Mark Wilkowske
PLUS
Mark Wilkowske
Courses Plus Student 18,131 Points

.getElementById('rainbow') This returns an element object and as such you can access the children of the UL - the li's - with listItems.children.

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

If you try that in CodePen or in Chrome it works but will not in the Treehouse code challenage compiler.

.getElementsByTagName('li') passes challenge because the question asks to select only the li's, not the whole ul object.

dallas kelley
dallas kelley
7,884 Points

While document.getElementsByTagName('li'); works for this particular problem it wouldn't work if you had more than one list that had different IDs. For example document.getElementsByTagName('li'); would select all <li> tags in a list that may not need to be selected where as document.querySelectorAll("ul#rainbow > li"); will only select <li> tags inside the UL with the ID: rainbow.

thanks, it works

Looks like it's a small typo. It's document.getElementById("");

Instead of

document.getElementsById("");

It's element and not elements.

Hassan Noueilaty
Hassan Noueilaty
3,713 Points

Thanks for the replies. I removed the 's' and made it singular. Unfortunately, I still encountered an error:

Bummer! There was an error with your code: TypeError: 'undefined' is not an object (evaluating 'listItems[i].style')

Daven Hietala
Daven Hietala
8,040 Points

dallas kelley, your solution worked for me. Thank you! @Hassan Noueilaty, perhaps you can change the best answer to dallas kelley considering her answer is the actual solution to your question.

Happy coding!

TRY THIS! var listItems; var colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"]; listItems = document.getElementsByTagName('li') for(var i = 0; i < colors.length; i ++) { listItems[i].style.color = colors[i];
}

Roald Jurrian Kamman
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Roald Jurrian Kamman
Front End Web Development Techdegree Graduate 15,544 Points

getElementsByTagName('li') worked for me but I was also confused as I used getElementsByTagName('ul') and that provided the same error. Can anyone explain why using <ul> tag didn't work?

Actually, the twist here is not with the code itself as this challenge could be addressed in multiple ways as shown below. It's just that you should declare the var listItems and your code before the "for loop", otherwise you would get this error.

In other words, the system exits the loop and then works on your code which has some unidentified objects. However, I think it should work fine with other text editors :)

Bummer: There was an error with your code: TypeError: 'undefined' is not an object (evaluating 'listItems[i]').

Correct Answers: var listItems = document.querySelector('#rainbow').children; var listItems = document.getElementById('rainbow').children; var listItems = document.getElementsByTagName('li');

just write any of the correct answers anywhere above the for loop (to be more specific; line 1 by declaring value within or anywhere between lines 1-3).

Hope that helps.

Regards, H