Javascript 尝试调用2个JS文件，但只有1个有效

我有一个HTML页面，它调用了2个JS文件（在一个包含2组不同图像的网站上，1个页面的不同部分上有2个图像滑块）。我的问题是只有一个滑块在工作，而另一个没有。不允许在一个HTML文档上调用两个不同的JS文件吗？另一件奇怪的事情是，我把两个图像滑块分成了两个不同的HTML文档，并调用了它们各自的JS文件，它们都工作了，但当它们在同一个页面上时就不工作了。对不起，我对这一切都不熟悉

HTML

app.js

let sliderWrap = document.querySelector('.slider-wrap');
let slider = document.querySelector('.slider');
let clonesWidth;
let sliderWidth;
let clones = [];
let scrollPos = 1
let sliderHover = false;
let req;1
let items = [...document.querySelectorAll('.slider-item')];
let images = [...document.querySelectorAll('.img-div')];


images.forEach((image, idx) => {
    image.style.backgroundImage = `url(./pics2/${idx+1}.jpg)`
})

items.forEach(item => {
    let clone = item.cloneNode(true);
    clone.classList.add('clone');
    slider.appendChild(clone);
    clones.push(clone);
})

sliderWrap.addEventListener('mouseover', () =>{
    sliderHover = true;
})

sliderWrap.addEventListener('mouseleave', () =>{
    sliderHover = false;
})

function getClonesWidth(){
    let width = 0;
    clones.forEach(clone => {
        width += clone.offsetWidth;
    })
    return width;
}


function scrollUpdate(){
    if(window.innerWidth > 760){
        sliderWrap.style.overflow = 'hidden';
        if(!sliderHover){
            scrollPos -= .4
        }

        if(clonesWidth + scrollPos >= sliderWidth){
            
            scrollPos = 1;
        }else if(scrollPos <= 0){
            
            scrollPos = sliderWidth - clonesWidth - 1
        }
        slider.style.transform = `translateX(${-scrollPos}px)`

        req = requestAnimationFrame(scrollUpdate)
    }else{
        sliderWrap.style.overflow = 'scroll';
    }

}


function onLoad(){

    calaculateDimensions()
    scrollPos = 1;
    scrollUpdate();
}

function calaculateDimensions(){

    sliderWidth = slider.getBoundingClientRect().width;
    clonesWidth = getClonesWidth();
}

onLoad();

let sliderWrap=document.querySelector（'.sliderWrap'）；
让slider=document.querySelector（'.slider'）；
设克隆宽度；
让滑动宽度；
让克隆=[]；
设scrollPos=1
设sliderHover=false；
let-req；1.
let items=[…document.querySelectorAll（'.slider item'）；
让images=[…document.querySelectorAll（'.img div'）]；
images.forEach（（image，idx）=>{
image.style.backgroundImage=`url（./pics2/${idx+1}.jpg）`
})
items.forEach（item=>{
设clone=item.cloneNode（true）；
clone.classList.add（'clone'）；
slider.appendChild（克隆）；
克隆。推送（克隆）；
})
SliderRap.addEventListener（'mouseover'，（）=>{
sliderHover=true；
})
SliderRap.addEventListener（'mouseleave'，（）=>{
滑盖=假；
})
函数getClonesWidth（）{
设宽度=0；
clone.forEach（clone=>{
宽度+=clone.offsetWidth；
})
返回宽度；
}
函数scrollUpdate（）{
如果（window.innerWidth>760）{
SliderRap.style.overflow='隐藏'；
如果（！sliderHover）{
滚动位置-=.4
}
如果（克隆宽度+滚动位置>=滑块宽度）{
scrollPos=1；
}否则，如果（滚动位置{
image.style.backgroundImage=`url（./pics3/${idx+1}.jpg）`
})
items2.forEach（item=>{
设clone=item.cloneNode（true）；
clone.classList.add（'clone'）；
幻灯片2.追加子项（克隆）；
克隆2.推送（克隆）；
})
SliderRap2.addEventListener（'mouseover'，（）=>{
SliderOver2=真；
})
SliderRap2.addEventListener（'mouseleave'，（）=>{
滑盖2=假；
})
函数getClonesWidth（）{
设宽度=0；
克隆2.forEach（克隆=>{
宽度+=clone.offsetWidth；
})
返回宽度；
}
函数scrollUpdate（）{
如果（window.innerWidth>760）{
SliderRap2.style.overflow='hidden'；
如果（！SliderOver2）{
scrollPos2-=.15
}
如果（clonesWidth2+scrollPos2>=滑块宽度2）{
2=1；
}else if（scrollPos2您还需要使用2后缀来确定函数的范围。另一种方法是添加
type=“module”
属性。如果您这样做，那么您不需要任何2个后缀，除了html相关的后缀。
请将每个后缀的JavaScript和html作为文本发布在这里。请添加您的代码，您会遇到这个问题。我几乎可以肯定，运行滑块的JS不会同时处理页面上的多个滑块。是的，您可以当然，一次在一个网页上加载多个JS文件，但根据slider JS的编码方式，它可能会使用ID或其他任何数量的方法来查找第一个slider元素，这些方法只能处理页面上的一个slider。如果你想要一个明确的答案，你必须发布JS和HTML。只需添加de.@turntlane“不工作”是什么意思？您是否收到某种错误消息？我在哪里添加type=“module”？将其添加到脚本中，使其生效！！非常感谢。刚刚查阅了它，现在我明白了为什么会生效。我很感激！Np，如果我的答案回答了你的问题，你能接受/升级我的答案吗？谢谢还不能升级，但接受了答案。再次感谢！
let sliderWrap = document.querySelector('.slider-wrap');
let slider = document.querySelector('.slider');
let clonesWidth;
let sliderWidth;
let clones = [];
let scrollPos = 1
let sliderHover = false;
let req;1
let items = [...document.querySelectorAll('.slider-item')];
let images = [...document.querySelectorAll('.img-div')];


images.forEach((image, idx) => {
    image.style.backgroundImage = `url(./pics2/${idx+1}.jpg)`
})

items.forEach(item => {
    let clone = item.cloneNode(true);
    clone.classList.add('clone');
    slider.appendChild(clone);
    clones.push(clone);
})

sliderWrap.addEventListener('mouseover', () =>{
    sliderHover = true;
})

sliderWrap.addEventListener('mouseleave', () =>{
    sliderHover = false;
})

function getClonesWidth(){
    let width = 0;
    clones.forEach(clone => {
        width += clone.offsetWidth;
    })
    return width;
}


function scrollUpdate(){
    if(window.innerWidth > 760){
        sliderWrap.style.overflow = 'hidden';
        if(!sliderHover){
            scrollPos -= .4
        }

        if(clonesWidth + scrollPos >= sliderWidth){
            
            scrollPos = 1;
        }else if(scrollPos <= 0){
            
            scrollPos = sliderWidth - clonesWidth - 1
        }
        slider.style.transform = `translateX(${-scrollPos}px)`

        req = requestAnimationFrame(scrollUpdate)
    }else{
        sliderWrap.style.overflow = 'scroll';
    }

}


function onLoad(){

    calaculateDimensions()
    scrollPos = 1;
    scrollUpdate();
}

function calaculateDimensions(){

    sliderWidth = slider.getBoundingClientRect().width;
    clonesWidth = getClonesWidth();
}

onLoad();

let sliderWrap2 = document.querySelector('.slider-wrap2');
let slider2 = document.querySelector('.slider2');
let clonesWidth2;
let sliderWidth2;
let clones2 = [];
let scrollPos2 =1
let sliderHover2 = false;
let req2; // request animation frame reference
let items2 = [...document.querySelectorAll('.slider-item2')];
let images2 = [...document.querySelectorAll('.img-div2')];


images2.forEach((image, idx) => {
    image.style.backgroundImage = `url(./pics3/${idx+1}.jpg)`
})

items2.forEach(item => {
    let clone = item.cloneNode(true);
    clone.classList.add('clone');
    slider2.appendChild(clone);
    clones2.push(clone);
})

sliderWrap2.addEventListener('mouseover', () =>{
    sliderHover2 = true;
})

sliderWrap2.addEventListener('mouseleave', () =>{
    sliderHover2 = false;
})

function getClonesWidth(){
    let width = 0;
    clones2.forEach(clone => {
        width += clone.offsetWidth;
    })
    return width;
}


function scrollUpdate(){
    if(window.innerWidth > 760){
        sliderWrap2.style.overflow = 'hidden';
        if(!sliderHover2){
            scrollPos2 -= .15
        }

        if(clonesWidth2 + scrollPos2 >= sliderWidth2){
            
            scrollPos2 = 1;
        }else if(scrollPos2 <= 0){
            
            scrollPos2 = sliderWidth2 - clonesWidth2 - 1
        }
        slider2.style.transform = `translateX(${-scrollPos2}px)`

        req2 = requestAnimationFrame(scrollUpdate)
    }else{
        sliderWrap2.style.overflow = 'scroll';
    }

}


function onLoad(){

    calaculateDimensions()
    scrollPos2 = 1;
    scrollUpdate();
}

function calaculateDimensions(){

    sliderWidth2 = slider2.getBoundingClientRect().width;
    clonesWidth2 = getClonesWidth();
}

onLoad()