Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM Getting a Handle on the DOM Select by Tag Name

Charlotte Jane Pollard
PLUS
Charlotte Jane Pollard
Courses Plus Student 2,424 Points

I don't understand the error.. is there a bug because I'm sure I've answered it right??? :/

I've answered the question in accordance with what I've just learned (to look up and select multiple elements in a collection (the <ul> elements in this case) so...

let listItems = document.getElementsByTagName('ul');

but it's returning the error:

Bummer: cannot read property 1 of null

I don't understand... it's a simple answer to a simple question, am I missing something??? :/

app.js
// Complete the challenge by writing JavaScript below
const colors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"];
let listItems = document.getElementsByTagName('ul');

for ( let i = 0; i < colors.length; i++ ) {
  listItems[i].style.color = colors[i];    
}
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript and the DOM</title>
  </head>
  <body>
    <h1>My List</h1>
    <ul>
      <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="app.js"></script>
  </body>
</html>

1 Answer

Ngadhnjim Rexhaj
Ngadhnjim Rexhaj
44 Points

instead of '' document.getElementsByTagName('ul'); " use " document.getElementsByTagName('li'); " because you're not iterating in items(li) but in list itself, also try duplicating code and you'll see that for every <ul> you'll have different colors from array.

Charlotte Jane Pollard
Charlotte Jane Pollard
Courses Plus Student 2,424 Points

Thank you. That's what I did in the end, but the question specifically said to reference the ul elements, maybe I read it wrong or didn't read into it enough.. Thank you for taking the time to answer my question! :)

"Complete the code by setting the variable listItems to refer to an HTMLCollection. The collection should contain all list items in the <ul> element."