HTML form按钮点击调用GWAPIUser函数提示未定义错误如何解决

• 打开浏览器开发者工具「网络」面板，刷新页面查看main.js的请求状态：如果返回404则是资源路径配置错误；如果返回200则继续检查函数作用域问题。
• 在开发者工具「控制台」直接输入GWAPIUser回车，若仍提示未定义，说明函数未暴露到全局作用域，或者main.js存在语法错误导致文件加载后未正确执行。
• 检查express静态资源配置：确认app.js中是否存在app.use(express.static('public'))或者类似的静态资源目录配置，express-generator生成的项目默认已配置该规则。

方案1：修正静态资源引用路径 #

express-generator默认将public目录设为静态资源根目录，访问该目录下的文件不需要加/public前缀，修改HTML中的script标签：

<!-- 修改前：错误路径 -->
<!-- <script type="application/javascript;charset=utf-8" src="/public/javascripts/main.js"></script> -->
<!-- 修改后：正确路径 -->
<script type="application/javascript;charset=utf-8" src="/javascripts/main.js"></script>

90%以上该场景的报错都是路径配置错误导致，修改后刷新页面即可解决。

方案2：手动将函数挂载到全局作用域 #

如果路径正确仍报错，是因为函数仅存在于局部作用域，无法被行内onclick访问，修改main.js代码，将函数挂载到window对象：

/* main.js */
const key = 'authkey';

async function GWAPIUser() {
  const response = await fetch(`https://api.guildwars2.com/v2/account/achievements?access_token=${key}`);
  const data = await response.json();
  console.log(data);
};
// 新增该行，将函数暴露到全局
window.GWAPIUser = GWAPIUser;

方案3：规范的事件绑定方案（推荐） #

不使用行内onclick属性，改用JS事件监听的方式绑定点击事件，不需要暴露全局函数，代码可维护性更高：

1. 先删除HTML按钮标签中的onclick="GWAPIUser()"属性：

<button id="form-button" type="button">Click Here!</button>

2. 在main.js末尾新增事件监听代码：

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('form-button').addEventListener('click', GWAPIUser);
})

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