JavaScript模块中通过HTML onclick调用函数失效的原因及解决方案

嗨，我来帮你理清楚这个问题哈！

为什么会失效？ #

当你给script标签加上type="module"时，这个JS文件就变成了ES模块，模块有自己独立的作用域——里面定义的函数、变量默认只会在模块内部可见，不会自动挂载到全局的window对象上。而HTML里的onclick属性是在全局作用域下去查找对应的函数的，所以自然找不到模块里的mathfa函数啦。

哪怕你把mathfa放在另一个文件再导入到主模块里，它依然是模块作用域内的成员，没暴露到全局，所以onclick还是调用不到。

怎么解决才能继续用onclick？ #

给你两个实用的方案：

方案1：把函数手动挂载到window对象

在你的模块文件里，定义完mathfa函数后，把它添加到window上，这样它就变成全局可访问的了：

function mathfa(ma) {
    // 你的函数逻辑...
}
// 手动暴露到全局
window.mathfa = mathfa;

这样HTML里的onclick="mathfa('-')"就能正常调用这个函数了。

方案2：在模块中动态绑定onclick属性

你也可以在模块里获取到按钮元素，直接给它设置onclick属性，这样依然能保留onclick的写法，同时不用暴露全局函数：

function mathfa(ma) {
    // 你的函数逻辑...
}
// 获取按钮元素
const minusBtn = document.querySelector('input.dark[value="-"]');
// 绑定onclick
minusBtn.onclick = function() {
    mathfa('-');
};

这种方式既不用污染全局作用域，又能达到和HTML onclick一样的效果。

额外提醒 #

虽然这两个方案都能让你继续用onclick，但从代码可维护性和安全性角度来说，更推荐用addEventListener（你提到过的方法），不过既然你明确想要用onclick，上面的方案完全能满足需求～

备注：内容来源于stack exchange，提问作者Ali Nasiri