HTML中调用onclick绑定的JS函数报未捕获引用错误如何解决

问题根因 #

• 你遇到的是作用域访问问题：Codepen平台默认会把JS面板的代码包裹在DOMContentLoaded事件的回调函数中执行，你定义的randomQuote函数属于这个回调的局部作用域，没有挂载到全局window对象上。而HTML行内的onclick事件只能调用全局作用域下的函数，找不到局部作用域的randomQuote，就会触发未捕获的引用错误。
• 你在JS代码内部直接调用randomQuote可以正常运行，正是因为二者处在同一个作用域下，能够正常访问该函数。

修复方案 #

方案1：把函数暴露到全局作用域 #

在JS代码的randomQuote函数定义完成后，添加一行代码把函数挂载到window对象上即可：

window.randomQuote = randomQuote;

方案2：使用JS绑定点击事件（更推荐） #

去掉HTML按钮标签里的onclick="randomQuote()"属性，直接在JS代码中给按钮绑定事件监听，不需要污染全局作用域，更符合前端开发规范：

// 原生JS写法
document.getElementById('new-quote').addEventListener('click', randomQuote)
// 如果你用jQuery也可以用下面的写法
// $('#new-quote').on('click', randomQuote)

额外优化建议 #

你当前使用的是同步AJAX请求，会阻塞页面渲染，建议改成异步请求，等数据获取完成后再启用按钮，避免用户在数据未加载完成时点击返回无效内容。

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