求助：点击按钮触发Uncaught ReferenceError: add函数未定义

安全阿岳

2026-6-16

问题原因

你的add函数定义在DOMContentLoaded的回调函数内部，属于局部作用域，而HTML元素onclick属性中调用的函数，会在全局作用域下查找。两者作用域不匹配，导致浏览器找不到add函数，抛出Uncaught ReferenceError错误。

解决方案

方案1：将函数暴露到全局作用域（快速修复）

修改JavaScript代码，把add函数挂载到全局的window对象上，让onclick能找到它：

document.addEventListener("DOMContentLoaded", function() {
    console.log("Script connected correctly");

    window.add = function(num) {
        console.log(num);
        // 实现数字追加到输入框的逻辑
        const input = document.getElementById('calc-input');
        input.value += num;
    }
});

方案2：移除HTML中的onclick属性，用JS绑定事件（推荐）

这种方式避免全局作用域污染，更符合现代前端开发规范，也便于后续维护：

步骤1：修改HTML，移除所有数字按钮的`onclick`属性

示例：

<tr>
    <td><button>7</button></td>
    <td><button>8</button></td>
    <td><button>9</button></td>
    <td><button>-</button></td>
</tr>
<!-- 其他数字按钮同理，删除onclick="add(X)" -->

步骤2：用事件委托绑定点击逻辑

通过给父元素（table）绑定事件，统一处理所有数字按钮的点击：

document.addEventListener("DOMContentLoaded", function() {
    console.log("Script connected correctly");
    const input = document.getElementById('calc-input');
    
    document.querySelector('table').addEventListener('click', function(e) {
        const btn = e.target;
        // 只处理数字按钮的点击
        if (btn.tagName === 'BUTTON' && !isNaN(btn.textContent.trim())) {
            const num = btn.textContent.trim();
            input.value += num;
            console.log(num);
        }
    });
});