There are two parts of the code which need addressing really. The first is that the
portfolioHeadingContainer
appears to be null. This means that it wasn't found on the document, so the JS produces an error once the
displayProjectItems()
method is called.
The second is that you can bind events to new elements once the DOM has been updated. In your
displayProjectItems()
method you're setting the
innerHTML
property of the container, which then updates the DOM. Once that's been done you can bind to click events of the new children by simply running query selectors afterward.
portfolioGrid.innerHTML = displayProjectItem;
const children = document.querySelectorAll('.portfolio__item');
console.log(`I have managed to find ${children.length} children!`);