Issue with checking if item is in DOM and the executing the javascript function

I’m making a webpage that has two different navbars… Lets say I named them navbar1 and navbar2.. soo the navbar1 is being used on the home page of the web site and navbar2 on all other sub pages… I have written a pure Javascript function that checks if the navbar1 exists in DOM and if it does then it does something… if navbar1 doesent exist in DOM it should ignore that part of code and move forward with the rest…

so now I have this issue that I spent several hours now trying to resolve… and I just can figure it out… When I go to the home page the code works… everything that should happen to navbar1 happens… but if I go to a subpage that doesn’t use navbar1 I get this error in the console: “Cannot read properties of null (reading ‘getBoundingClientRect’)“

I would apreciate some help… and if it matters I don’t have much experience with javascript so 🙂

So here’s my JS code…

function docReady(fn) {
    if (document.readyState === "complete" || document.readyState === "interactive") {
        setTimeout(fn, 1);
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
}

docReady(function() {
    var className = "scroll";
    var scrollTrigger = 60;
    var navTogler = document.getElementById('navbar-toggler');
    var navbar1 = document.getElementById('navbar1');

    var isInViewport = function (elem) {
        var bounding = elem.getBoundingClientRect();
        return (
            bounding.top >= 0 &&
            bounding.left >= 0 &&
            bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    };

    if (isInViewport(navbar1)) {
        navTogler.addEventListener('click', classToggle);

        function classToggle() {
            navbar1.classList.toggle('has-bg');
            if (navbar1.classList.contains('has-bg')) {
                document.getElementsByClassName("logo")[0].src="./assets/images/Logo_blue.svg";
                document.getElementsByClassName("search")[0].src="./assets/images/search-blue.svg";
            }
            if (navbar1.classList.contains('scroll') && navbar1.classList.contains('has-bg')) {
                document.getElementsByClassName("logo")[0].src="./assets/images/Logo_blue.svg";
                document.getElementsByClassName("search")[0].src="./assets/images/search-blue.svg";
            }
            if (!navbar1.classList.contains('scroll') && !navbar1.classList.contains('has-bg')) {
                document.getElementsByClassName("logo")[0].src="./assets/images/Logo_White.svg";
                document.getElementsByClassName("search")[0].src="./assets/images/search.svg";
            }
            else {
                // console.log("something");
            }
        }

        window.onscroll = function() {
            if (window.scrollY >= scrollTrigger || window.pageYOffset >= scrollTrigger) {
                document.getElementById("navbar1").classList.add(className);
                document.getElementsByClassName("logo")[0].src="./assets/images/Logo_blue.svg";
                document.getElementsByClassName("search")[0].src="./assets/images/search-blue.svg";
            }
            else {
                document.getElementById("navbar1").classList.remove(className);
                document.getElementsByClassName("logo")[0].src="./assets/images/Logo_White.svg";
                document.getElementsByClassName("search")[0].src="./assets/images/search.svg";
            }
        };
    }

    var swiper = new Swiper(".mySwiper", {
        slidesPerView: 3,
        grid: {
            rows: 2,
        },
        spaceBetween: 30,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
    });

    console.log("hello swiper");

});

Answer

isInViewport() should return false if the element doesn’t exist.

    var isInViewport = function (elem) {
        if (!elem) {
            return false;
        }
        var bounding = elem.getBoundingClientRect();
        return (
            bounding.top >= 0 &&
            bounding.left >= 0 &&
            bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    };

Advertisement

Answer