CODEWITHSUNDEEP
javascript
Sai Murali
Sai Murali

Reputation: 11

Uncaught TypeError: Cannot read properties of null (reading 'parentElement')

I am seeing this error

Uncaught TypeError: Cannot read properties of null (reading 'parentElement') at (index):15 at Array.forEach () at IntersectionObserver. ((index):12)

Here is the code:

<script>window.addEventListener('DOMContentLoaded', () => {

    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            const id = entry.target.getAttribute('id');
            if (entry.intersectionRatio > 0) {
                document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.add('active');
            } else {
                document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.remove('active');
            }
        });
    });

    
    document.querySelectorAll('div[id]').forEach((div) => {
        observer.observe(div);
    });
    
});
</script>

Script is working well, but seeing errors in the console. Kindly let me know what to do.

Upvotes: 0

Views: 8186

Answers (1)

jpadd009
jpadd009

Reputation: 45

QuerySelector is returning a NULL value, which does not have the property “parentElement”.

If not finding a matching element is expected behavior for your app, you’ll need to handle for that situation, or adjust your query.

Maybe those elements aren’t in the DOM when the queries are run.

Upvotes: 1

Related Questions