JavaScript回到顶部按钮与促销栏脚本报错：Uncaught ReferenceError

错误分析与修复点 #

回到顶部按钮（home.js）问题 #

• 构造函数内重复实例化：原代码在HomeIndex构造函数内部嵌套$(document).ready并再次实例化自身，导致循环调用逻辑混乱。需将DOM就绪事件移到构造函数外部，仅在页面加载完成后实例化一次。

促销栏（common.js）核心错误 #

• 类名大小写不匹配：构造函数定义为小写common，但实例化时用了大写new Common()，直接引发Uncaught ReferenceError: Common is not defined。
• 变量/方法拼写错误：
  • 促销项变量promoitems（小写i）与赋值时的promoItems（大写I）不一致，导致变量未定义。
  • 方法调用showNextPeromotionItem拼写错误，应为showNextPromoItem。
  • 计数器变量currentItems++应为currentItem++（单数形式）。
  • 当前促销项引用self.promoBar.promoItem需改为self.promoBar.promoItems.eq(self.promoBar.currentItem)，定位到具体项。
• jQuery方法大小写错误：FadeIn应改为小写fadeIn，jQuery方法首字母需小写。
• 语法错误：淡入代码中的逗号误用为链式方法分隔符，需改为点号.fadeIn()。

修正后的完整代码 #

app.js（无修改） #

var app = (function() {
    /* 属性 */
    var websiteName = "PetShop";
    /* 方法 */
    return {
        getWebsiteName: function() {
            return websiteName;
        }
    }
})();

home.js（修正后） #

function HomeIndex() {
    /* 属性 */
    const heightFromTop = 300;
    /* 方法 */
    this.initialiseScrollToTopButton = function() {
        /* 窗口滚动事件处理器 */
        $(window).scroll(function() {
            var verticalHeight = $(this).scrollTop();
            if (verticalHeight > heightFromTop) {
                $("#scrollToTop").fadeIn();
            } else {
                $("#scrollToTop").fadeOut();
            }
        });
        /* 回到顶部点击事件处理器 */
        $("#scrollToTop").click(function() {
            $("html, body").animate({
                scrollTop: 0
            }, "slow");
        });
    }
}

// 移到构造函数外，避免重复实例化
$(document).ready(function() {
    app.homeIndex = new HomeIndex();
    app.homeIndex.initialiseScrollToTopButton();
});

common.js（修正后） #

// 统一类名为大写Common（符合JS命名规范）
function Common() {
    let self = this;
    this.promoBar = {
        promoItems: null,
        currentItem: 0,
        numberOfItems: 0,
    };

    this.initialisePromo = function() {
        // 统一变量名大小写
        let promoItems = $("#promo > div");
        this.promoBar.promoItems = promoItems;
        this.promoBar.numberOfItems = promoItems.length;
        // 初始化显示第一个促销项
        this.promoBar.promoItems.eq(this.promoBar.currentItem).show();
        this.startDelay();
    }

    this.startDelay = function() {
        setTimeout(function() {
            // 修正方法名拼写
            self.showNextPromoItem();
        }, 4000);
    }

    this.showNextPromoItem = function() {
        // 准确定位当前促销项
        self.promoBar.promoItems.eq(self.promoBar.currentItem).fadeOut("slow").promise().done(function() {
            // 修正计数器变量名
            if (self.promoBar.currentItem >= (self.promoBar.numberOfItems - 1)) {
                self.promoBar.currentItem = 0;
            } else {
                self.promoBar.currentItem++;
            }
            // 修正方法名与语法错误
            self.promoBar.promoItems.eq(self.promoBar.currentItem).fadeIn("slow", function() {
                self.startDelay();
            });
        });
    }
}

$(document).ready(function() {
    // 对应修正后的类名
    app.common = new Common();
    app.common.initialisePromo();
});

内容的提问来源于stack exchange，提问作者AndNard