JavaScript JavaScript and the DOM Responding to User Interaction The Event Object

Kelly Bransford
Kelly Bransford
5,395 Points

I can't add an item or remove an item after adding an event listener to the parent element...

It was working fine and then I added the Event Listener to the parent element instead of the list items. Now I cant add a new item or remove an item on the page. Can anybody help me figure out what Im missing?

https://w.trhou.se/dsd1mqwzb9

1 Answer

1) For adding an item

In index.html your Add item button has class="description"

<button class="description">Add item</button>

However in app.js you are trying to select the button with class="addItemButton"

const addItemButton = document.querySelector('button.addItemButton');

This leads to the following error displayed in the console:

Uncaught TypeError: Cannot read property 'addEventListener' of null

Solution: Change the class to "addItemButton"

<button class="addItemButton">Add item</button>

2) For removing an item

If you check the console when clicking the remove button you will see:

 'li: last-child' is not a valid selector.

This is due to the space between li: and last-child in your remove button event listener

Solution: Remove the space

let li = document.querySelector('li:last-child');