为何出现'Uncaught ReferenceError: increment is not defined'错误？代码排查

问题原因 #

你的increment函数定义在DOMContentLoaded事件的回调函数内部，属于局部作用域，而HTML按钮的onclick="increment()"是在全局作用域下查找这个函数，自然找不到，所以触发了引用错误。

解决方案 #

方案一：用JS绑定按钮点击事件（推荐）

先修改HTML中的按钮，移除onclick属性：

<button id="increment-btn">INCREMENT</button>

然后在JS代码中添加按钮的事件监听：

document.addEventListener('DOMContentLoaded', function() {
    let count = 0
    let countEl = document.getElementById("count-el")
    // 获取按钮元素
    let incrementBtn = document.getElementById("increment-btn")
    
    function increment() {
        count = count + 1
        countEl.innerText = count;
    }
    
    increment()
    countEl.addEventListener("click", increment);
    // 给INCREMENT按钮绑定点击事件
    incrementBtn.addEventListener("click", increment);
});

方案二：将函数暴露到全局作用域（不推荐）

如果不想修改HTML，可以在JS回调里把increment函数挂载到window对象，让它成为全局函数：

document.addEventListener('DOMContentLoaded', function() {
    let count = 0
    let countEl = document.getElementById("count-el")
    
    function increment() {
        count = count + 1
        countEl.innerText = count;
    }
    
    // 把函数暴露到全局作用域
    window.increment = increment;
    
    increment()
    countEl.addEventListener("click", increment);
});

说明 #

优先选择方案一，这样能避免全局作用域污染，让代码结构更清晰。

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