获取未捕获的类型错误：无法读取滚动的空错误的属性“offsetTop”

Question

I am having an issue where I get a uncaught type error, but the script still works. I would like to resolve this but cannot seem to see the issue. Any help is greatly appreciated! Script is below.

StickyNav: function() {
    let mainNavLinks = document.querySelectorAll(".js-pdp-link");
    let mainSections = document.querySelectorAll("section");
    let lastId;
    let cur = [];

    window.addEventListener("scroll", event => {
        let fromTop = window.scrollY + 70;

        mainNavLinks.forEach(link => {
            let section = document.querySelector(link.hash);

        if (section.offsetTop <= fromTop && section.offsetTop + section.offsetHeight > fromTop) {
            link.classList.add("js-active");
       } else {
           link.classList.remove("js-active");
       }
       });
    });
}

Answer 1

When you do:

let mainNavLinks = document.querySelectorAll(".js-pdp-link");

mainNavLinks.forEach(link => {
  let section = document.querySelector(link.hash);

You are iterating all the elements with the .js-pdp-link class and, if they implement the HTMLHyperlinkElementUtils interface ( ie is an a or an area element), extracting their hash property. Then, you use the hash as a selector.

It can fail in three different ways:

1. If the target element doesn't implement HTMLHyperlinkElementUtils , link.hash returns undefined .

2. If the href attribute contains no hash, link.hash returns an empty string.

3. If there is no element with a id equal to that hash , querySelector(link.hash) is null .

The case 2 results in SyntaxError: '' is not a valid selector when you try document.querySelector(link.hash) .

The other two allow you to run the querySelector but result in section being null . Then, if you try to access its .offsetTop property, you will get TypeError: section is null .