按钮onclick事件调用foo函数报Uncaught ReferenceError未定义，但已提前声明该函数

问题根因排查 #

你遇到的Uncaught ReferenceError: foo is not defined报错，本质是全局作用域下没有成功挂载foo函数，结合你提供的代码，常见原因有以下几个：

• 内联脚本被CSP（内容安全策略）拦截
  如果站点响应头配置了Content-Security-Policy规则，且未开放内联脚本执行权限，你写在<script>标签中的foo函数定义代码会直接被浏览器拦截不执行，全局作用域自然不存在foo函数，触发onclick时就会抛出未定义错误。

验证方法：打开浏览器开发者工具的「网络」面板，查看当前页面请求的响应头是否存在Content-Security-Policy字段；同时查看「控制台」是否有CSP拦截内联脚本的相关警告。
解决方案：可以通过nonce、hash方式调整CSP规则放行当前内联脚本，也可以把foo函数的定义放到外部JS文件中引入。

• 服务端模板渲染异常导致DOM解析错乱
  你代码中<title><% title %></title>用了服务端模板语法，如果title变量输出的内容包含未闭合的标签（比如</title>、<script>这类特殊字符），会打乱浏览器的DOM解析逻辑，后续body内的script标签可能被识别为普通文本而非可执行脚本，导致foo函数未定义。

验证方法：右键页面选择「查看网页源代码」，检查渲染后的完整HTML结构是否符合预期，重点确认title部分和body内的script标签是否正常闭合。
解决方案：对title变量的输出做HTML转义，避免特殊字符破坏DOM结构。

• 函数定义脚本未正常输出到页面
  如果foo函数所在的script标签写在服务端模板的条件渲染分支中，且分支判断不满足，这段函数定义代码根本不会输出到最终的HTML页面中，自然找不到foo函数。

验证方法：同样查看网页源代码，确认foo函数的定义代码确实存在于最终页面内容中。
解决方案：调整模板逻辑，保证函数定义的script标签能正常输出到页面。

• 全局foo被后续内容覆盖
  如果实际完整代码中存在id为foo的DOM元素（旧版浏览器会自动把带id的元素挂载到window对象上），或者其他脚本后续重写了window.foo，也会导致触发onclick时找不到原有的foo函数。

验证方法：在控制台输入window.foo，查看输出是否为你定义的foo函数。
解决方案：避免全局变量命名冲突，改用addEventListener的方式绑定点击事件，替代内联onclick写法。

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