onclick属性无法找到导入JavaScript文件中的函数问题求助

ES模块（通过type="module"引入的脚本）拥有独立作用域，你导入的revealOnClick函数仅在模块内部可见，不会自动挂载到全局window对象上，所以HTML的onclick属性无法找到该函数。另外你的函数存在一处bug：document.getElementById("id")是固定查找id为id的元素，应该使用传入的参数id。

方法1：将函数暴露到全局作用域 #

在导入revealOnClick的index.js文件末尾添加代码，把函数挂载到window对象上：

import {Panel, revealOnClick} from "./JS_Module/websitemodule.js";

// 暴露函数到全局
window.revealOnClick = revealOnClick;

同时修复websitemodule.js里的函数逻辑：

export function revealOnClick (id = '') {
    // 替换固定字符串"id"为参数id
    document.getElementById(id).style.removeProperty("display");
}

方法2：使用事件监听替代onclick属性（推荐） #

这种写法更符合现代前端规范，避免全局污染：

1. 给按钮添加可识别的id：

<button id="targetBtn">
    <a style="font-size: 4vw;">Sometype of Button</a>
</button>

2. 在index.js中通过事件监听绑定点击逻辑：

import {Panel, revealOnClick} from "./JS_Module/websitemodule.js";

// 等待DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('targetBtn').addEventListener('click', () => {
        revealOnClick('SomeTypeofID');
    });
});

同样需要修复websitemodule.js里的参数问题。

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