javascript 控制台中的错误导致 javascript 的其余部分无法正常工作

Question

我正在为我的 symfony 课程做一个项目，我使用 webpack 和“slidejs”库制作轮播。在我使用 splide 的页面上一切正常，但在其他未使用它的页面上，我在控制台中收到一条错误消息，我的所有其他 javascript 不再工作

错误：https://i.stack.imgur.com/x21fr.png

我正在将 splide.js 文件导入我的 app.js，我的幻灯片配置如下所示

// Splide

// Last news
import Splide from '@splidejs/splide';
let splideEvents = new Splide( '#splideEvents', {
    classes: {
        arrow : 'splide__arrow bg-primary',
    },
    type: 'splide',
    perPage: 4,
    perMove: 1,
    gap: '10px',
    pagination: false,
    breakpoints: {
        992: {
            perPage: 2
        },
        500: {
            perPage: 1,
            gap: 0
        }
    }
} );
splideEvents.mount();


let splideNews = new Splide( '#splideNews', {
    classes: {
        arrow : 'splide__arrow bg-primary',
    },
    type: 'splide',
    perPage: 4,
    perMove: 1,
    gap: '10px',
    pagination: false,
    breakpoints: {
        992: {
            perPage: 2
        },
        500: {
            perPage: 1,
            gap: 0
        }
    }
} );
splideNews.mount();

let splideReleases = new Splide('#splideReleases', {
    classes: {
        arrow : 'splide__arrow bg-primary',
    },
    type: 'splide',
    perPage: 4,
    perMove: 1,
    gap: '10px',
    pagination: false,
    breakpoints: {
        992: {
            perPage: 2
        },
        500: {
            perPage: 1,
            gap: 0
        }
    }
})
splideReleases.mount();

有什么解决办法吗？

Answer 1

您需要检查您的元素是否存在于 dom 中：

if(document.querySelector('#splideEvents')) {
    let splideEvents = new Splide( '#splideEvents', {
        classes: {
            arrow : 'splide__arrow bg-primary',
        },
        type: 'splide',
        perPage: 4,
        perMove: 1,
        gap: '10px',
        pagination: false,
        breakpoints: {
            992: {
                perPage: 2
            },
            500: {
                perPage: 1,
                gap: 0
            }
        }
    } );

}

如果不是，则您什么都不做，因为页面中没有幻灯片

javascript 控制台中的错误导致 javascript 的其余部分无法正常工作

javascript error in the console that prevents the rest of the javascript from working

javascript

symfony

webpack

splidejs