控制台错误无法解构 'el.position(...)' 的属性 'top'，因为它未定义。 wordpress jquery

Question

So I am working on a wordpress site I am not familiar with. I get the following error in the console:

jquery-3.5.1.min.js:formatted:1504 Uncaught TypeError: Cannot destructure property 'top' of 'el.position(...)' as it is undefined.
    at doDotsCalculations (main.js?ver=20190317:6)
    at setOwlDotsPosition (main.js?ver=20190317:5)
    at HTMLDocument.<anonymous> (main.js?ver=20190317:5)
    at e (jquery-3.5.1.min.js:formatted:1422)
    at t (jquery-3.5.1.min.js:formatted:1433)

I am not entirely sure but this is what i got in main.js and where the error originated from. Any help is much appriciated. I cant see any visual errors in the site but it is adapted for screenreaders and other stuff i cant check for.

    $(function() {
        if ($.fn.multiscroll !== undefined) {
            $('#multiscroll').multiscroll({
                verticalCentered: true,
                anchors: ['first', 'second', 'third', 'fourth', 'fifth'],
                menu: '#msmenu',
                navigation: false,
                css3: true,
                navigationTooltips: ['First', 'Two', 'Three'],
                responsiveWidth: 992,
                responsiveExpand: true,
                loopBottom: false,
                loopTop: false,
                onLeave: function(index, nextIndex, direction) {},
                afterLoad: function(anchorLink, index) {},
                afterRender: function() {}
            });
        }
        if ($.fn.fullpage !== undefined) {
            $('#fullpage').fullpage({
                sectionsColor: [],
                anchors: ['firstPage', 'secondPage', '3rdPage'],
                menu: '#fpsmenu',
                responsiveExpand: true,
                responsiveWidth: 1400,
                continuousVertical: true,
                navigation: false,
                verticalCentered: false
            });
            $.fn.fullpage.setAllowScrolling(true);
        }
        $(".owl-carousel").on("initialized.owl.carousel", ()=>{
            setTimeout(()=>{
                $(".owl-item.active .owl-slide-animated").addClass("is-transitioned");
                $("section").show();
            }
            , 200);
        }
        );
        const $owlCarousel = $(".owl-carousel").owlCarousel({
            items: 1,
            loop: true,
            nav: true,
            navText: ['<svg width="32" height="32" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg>', '<svg width="32" height="32" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>']
        });
        $owlCarousel.on("changed.owl.carousel", e=>{
            $(".owl-slide-animated").removeClass("is-transitioned");
            const $currentOwlItem = $(".owl-item").eq(e.item.index);
            $currentOwlItem.find(".owl-slide-animated").addClass("is-transitioned");
            const $target = $currentOwlItem.find(".owl-slide-text");
            doDotsCalculations($target);
        }
        );
        $owlCarousel.on("resize.owl.carousel", ()=>{
            setTimeout(()=>{
                setOwlDotsPosition();
            }
            , 50);
        }
        );
        setOwlDotsPosition();
        function setOwlDotsPosition() {
            const $target = $(".owl-item.active .owl-slide-text");
            doDotsCalculations($target);
        }
        function doDotsCalculations(el) {
            const height = el.height();
            const {top, left} = el.position();
            const res = height + top + 20;
            $(".owl-carousel .owl-dots").css({
                top: `${res}px`,
                left: `${left}px`
            });
        }
        $(".carousel .carousel-item").first().addClass("active");
    });

Answer 1

You encountered this error because the element or some of its properties are undefined . Add a check to ensure that el is available before trying to access its top and left positions.

function doDotsCalculations(el) {
  if (el) {
    const height = el.height();
    const {top, left} = el.position();
    const res = height + top + 20;
    $(".owl-carousel .owl-dots").css({
      top: `${res}px`,
      eft: `${left}px`
    });
  }
  return null;
}

UPDATE : Remove the code from pages that are not using the Carousell to eliminate the error that you are facing. Pages that are not using it will most certainly not be able to locate the css classes .owl-item.active.owl-slide-text" , which do not contain top and left values since the css classes are not in the DOM .