页面加载时调用JavaScript函数操作HTML元素生成菜单失效问题求助

问题原因 #

• ul 元素本身不支持 onload 事件，该事件仅适用于 body、img、script、iframe 等需要加载外部资源的元素，你写在ul标签上的触发逻辑本身就不会执行。
• 你引入JS时使用了 type="module" 属性，模块脚本的顶层作用域是私有作用域，定义的 buildMenu 函数默认不会挂载到全局window对象，就算事件能触发也找不到对应函数。
• 额外说明：你给buildMenu加的async关键字没有必要，整个函数内没有异步await逻辑，属于冗余属性。

修复方案 #

第一步：修改 mynaivesdk.js 代码 #

新增DOM加载完成监听逻辑，不需要依赖HTML元素的事件触发：

function buildMenu(element){
    const webElements = [{"name": "Home", "href": "index.html"}, {"name": "Works", "href": "works.html"}, {"name": "Contact", "href": "contact.html"}]
    const menu = document.getElementById(element);
    webElements.forEach((webelement) => {
        // 这里改用模板字符串写法更简洁，也可以保留原来的字符串拼接逻辑
        const row = `<li><a href="${webelement.href}">${webelement.name}</a></li>`;
        menu.innerHTML += row;
    });
}

// 页面DOM节点加载完成后自动执行菜单构建
document.addEventListener('DOMContentLoaded', () => {
    buildMenu('mymenu');
});

第二步：修改HTML代码 #

删除ul标签上的无效onload属性即可：

<html>
<head>
    <script type="module" src="mynaivesdk.js"></script>
    <title>My Menu</title>
</head>
<body>
    <h1>This is my menu</h1>    
    <ul id="mymenu">        
    </ul>    
</body>
</html>

修改完成后刷新页面即可看到预期的菜单效果。

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