我的 javascript 有时仅适用于虚拟主机 [关闭]答案

【问题标题】：My javascript works only sometimes on webhosting [closed]我的 javascript 有时仅适用于虚拟主机 [关闭]
【发布时间】：2021-09-06 03:50:33
【问题描述】：

我的 javascript 有问题。这是一个画廊滑块。它在本地主机上完美运行，但是当我将它上传到虚拟主机上时，它有时只能在多次刷新后运行。控制台没有写任何错误，一切看起来都很好。

const carouselSlide = document.querySelector('.slide');
const carouselImages = document.querySelectorAll('.slide img');
 
//Buttons
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');

//Counter   
 let counter = 1;
 const size = carouselImages[0].clientWidth;

 carouselSlide.style.transform = 'translateX('+ (-size * counter) +'px)';
 

 //Button Listeners
 nextBtn.addEventListener('click',()=>{
     if (counter>= carouselImages.length -1) {return;}
     carouselSlide.style.transition = "transform 0.7s ease-in-out";
     counter++
     carouselSlide.style.transform = 'translateX('+ (-size * counter) +'px)';


 });

 prevBtn.addEventListener('click',()=>{
    if (counter <=0) {return;}
    carouselSlide.style.transition = "transform 0.7s ease-in-out";
    counter--
    carouselSlide.style.transform = 'translateX('+ (-size * counter) +'px)';


});
carouselSlide.addEventListener('transitionend', ()=> {

    if (carouselImages[counter].id === 'lastClone')
    {
        carouselSlide.style.transition = "none";
        counter = carouselImages.length - 2;
        carouselSlide.style.transform = 'translateX('+ (-size * counter) +'px)';

    }
    if (carouselImages[counter].id === 'firstClone')
    {
        carouselSlide.style.transition = "none";
        counter = carouselImages.length - counter;
        carouselSlide.style.transform = 'translateX('+ (-size * counter) +'px)';

    }

});

【问题讨论】：

显示的代码什么时候运行？
调试器是你的朋友。设置断点并遵循代码流。您甚至可以使用--auto-open-devtools-for-tabs 启动 Chrome 以立即打开开发工具并启用调试器和网络监视器。
检查文件是否加载（js、css...）
请提供minimal reproducible example。您当前的代码因错误而中断：TypeError: carouselImages[0] is undefined
你在隐身模式下签到了吗？

标签： javascript html web-hosting

【解决方案1】：

页面加载速度是首先想到的。在 localhost 上运行通常非常快。并且在执行代码之前加载 DOM。

没有关于您的代码何时执行的更多信息？我不能准确。

但我认为不同的刷新有关系。尝试附加一个调试器（您可以使用 Chrome 调试器来完成）并检查变量的值。

在文档准备好后仔细检查您的代码是否正在运行。

【讨论】：

谢谢，帮了大忙。