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) Traversing the DOM Getting the First and Last Child

Posted by Saajan Bedi
Saajan Bedi
12,174 Points

HtmlCollection Problem in IF statement

I'm not able to acces htmlColletion with indexes.

const toggleList = document.getElementById('toggleList');
const listDiv    = document.querySelector('.list');
const desciptionInput = document.querySelector('input.desc');
const desciptionP = document.querySelector('p.desc');
const desciptionButton = document.querySelector('button.desc');
const listUl = listDiv.querySelector('ul');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
const list = listUl.children;

const li = document.querySelector('li');
const liChildren = li.children;

console.log(liChildren);
if (liChildren[0].className == 'up'){
    liChildren[0].style.display = 'none';
}
Uncaught TypeError: Cannot read property 'className' of undefined

when I access htmlCollection with key in console i get undefined. I know i can use for loop on the list constant but i want to know why this doesn't work. Steven Parker

//Update
console.log(list[0]);
if (list[0]==firstListItem) {
      list[0].firstElementChild.style.display = 'none';
    }
Uncaught TypeError: Cannot set property 'className' of null

this doesn't work either but console.log(list[0]); returns list item. Is a loop must here.

Saajan Bedi
Saajan Bedi
12,174 Points

Guil Hernandez can you explain why this does not work.

2 Answers

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

:bell: Hi, I was alerted by your tag.

The concept is sound, and should work. To fully analyze the issue, I'd need to see the complete code (the HTML part in particular).

You can share the entire project at once if you make a snapshot of your workspace and post the link to it here.

Saajan Bedi
Saajan Bedi
12,174 Points

Here is the Workspace Snapshot. https://w.trhou.se/hlh1fspmod

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

With the whole code, the issue is clear. At the point where liChildren[0] was previously accessed (now commented out), the buttons had not yet been added so the list item had no children. The "console.log(liChildren);" line should have shown an empty list on the console.

Also, in the snapshot code on lines 24-26 there are references to an undefined "list" — did you perhaps mean "lis" instead?

Saajan Bedi
Saajan Bedi
12,174 Points
Saajan Bedi
Saajan Bedi
12,174 Points

Hi,Steven I got your point of button not being added. Early on I was working with li items in html in course that why ended up with this code. Thanks. That code is commented out because i was trying to accomplish the same task with the ul. .

// for confusion with ul
// the code for ul.
// ul is selected in listUl constant and ul children in list constant in code above in main post
const firstListItem = listUl.firstElementChild; 

console.log(list[0]);
if (list[0]==firstListItem) {
      list[0].firstElementChild.className='class';
    }
// Code for li item
const li = document.querySelector('li');
const liChildren = li.children;

console.log(liChildren);
if (liChildren[0].className == 'up'){
    liChildren[0].style.display = 'none';