JavaScript JavaScript and the DOM Traversing the DOM Getting the First and Last Child

Saajan Bedi
Saajan Bedi
11,917 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
11,917 Points

Guil Hernandez can you explain why this does not work.

2 Answers

Steven Parker
Steven Parker
170,475 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.

Steven Parker
Steven Parker
170,475 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
11,917 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';