1

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");
       }
       });
    });
}
Jack Bashford
  • 38,499
  • 10
  • 36
  • 67
AaronS
  • 131
  • 10
  • The error means `section` is undefined. Debug to figure out why it is undefined – Jaya Oct 22 '18 at 22:07
  • 1
    There's a value of `hash` that doesn't have an associated section. Check the values to make sure they're what you expect, and double-check that you didn't make any typos or anything. – John Montgomery Oct 22 '18 at 22:08
  • 1
    `document.querySelector` might return `null`. Any method in javascript that might return null should be checked to see if it is null or has a value before attempting to reference properties of it. https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#Return_value – chiliNUT Oct 22 '18 at 22:19
  • @JohnMontgomery you nailed it. I am missing a section that i am linking to with the sticky nav which causes the error, updated the section with the id and it worked perfectly. Sorry that it was a simple answer. Thanks everyone for all their suggestions! – AaronS Oct 22 '18 at 22:46
  • Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Heretic Monkey Oct 22 '18 at 23:02

1 Answers1

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 (i.e. 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.

David
  • 5,090
  • 2
  • 21
  • 42
  • Yup that was it, One of my sections was missing the corresponding id that I had for the sticky nav menu item. Thanks!! – AaronS Oct 22 '18 at 22:58