Проблема с проверкой наличия элемента в DOM и выполнением функции javascript

#javascript #html #dom

Вопрос:

Я создаю веб-страницу с двумя разными навигационными панелями… Допустим, я назвал их navbar1 и navbar2.. поэтому navbar1 используется на домашней странице веб-сайта, а navbar2-на всех других подстраницах… Я написал чистую функцию Javascript, которая проверяет, существует ли navbar1 в DOM, и если да, то она что-то делает… если navbar1 не существует в DOM, он должен игнорировать эту часть кода и двигаться вперед вместе с остальными…

итак, теперь у меня есть проблема, на решение которой я потратил несколько часов… и я просто могу ее решить… Когда я перехожу на домашнюю страницу, код работает… все, что должно произойти с navbar1, происходит… но если я перейду на подстраницу, которая не использует navbar1, я получу эту ошибку в консоли: «Не удается прочитать свойства null (чтение «getBoundingClientRect»)»

Я был бы признателен за некоторую помощь… и если это имеет значение, у меня нет большого опыта работы с javascript, так что 🙂

Итак, вот мой JS-код…

 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 amp;amp;
            bounding.left >= 0 amp;amp;
            bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) amp;amp;
            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') amp;amp; 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') amp;amp; !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");

});

1. Где вы проверяете, что элемент находится в DOM?

2. Вам нужно if (navbar1) { ... } обойти весь код, который использует navbar1 .

3. @Barmar Я проверяю с помощью этого var isInViewport = функция (элемент) {…}

4. Он звонит elem.getBoundingClientRect() , не проверяя elem , установлен ли он. Вот почему вы получаете сообщение об ошибке.

Ответ №1:

isInViewport() должен вернуться false , если элемент не существует.

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