在Chrome/Firefox元素标签写入的JavaScript无法执行，提示函数未定义

哇，这个坑我踩过好多次！让我来给你拆解一下问题出在哪，以及怎么快速解决。

问题根源 #

当你在Chrome/Firefox的Elements面板里右键选「编辑HTML」，然后插入<script>标签时，浏览器其实是用innerHTML来更新DOM的。而根据HTML标准，通过innerHTML插入的<script>标签完全不会被浏览器执行——这意味着你写的showResult函数根本就没被定义出来，点击锚点时自然会抛出ReferenceError。

亲测有效的解决方案 #

方案1：直接在Console面板定义全局函数 #

这是最简单的方式：

1. 打开Console面板（快捷键F12或Ctrl+Shift+I切换到Console）
2. 直接输入你的函数代码，回车执行：

function showResult() {
  var num = 5 * 5;
  alert(num);
}

3. 回到Elements面板添加你的锚点标签：<a onclick="showResult()">Click</a>
4. 点击锚点，函数就能正常触发了！

方案2：动态创建Script元素插入页面 #

如果你的函数代码比较长，或者想模拟真实的脚本加载场景，可以在Console里用JS动态生成脚本标签：

const script = document.createElement('script');
script.textContent = `
function showResult() {
  var num = 5 * 5;
  alert(num);
}
`;
document.body.appendChild(script);

执行这段代码后，脚本会被浏览器正确解析执行，showResult函数就会被注册到全局作用域里，再添加锚点标签就能正常调用了。

方案3：手动绑定点击事件（替代内联onclick） #

如果你非要在Elements里先加锚点，也可以跳过内联onclick，直接在Console里给锚点绑定事件：

1. 先在Elements里添加锚点：<a id="testBtn">Click</a>（给个ID方便定位）
2. 在Console里输入：

function showResult() {
  var num = 5 * 5;
  alert(num);
}
document.getElementById('testBtn').addEventListener('click', showResult);

这样点击锚点也能正常触发函数。

额外注意 #

如果你的测试页面有**内容安全策略（CSP）**限制，可能会阻止内联脚本或动态脚本执行。这种情况下，你可以在开发环境临时关闭CSP（比如Chrome的开发者工具里禁用CSP），或者调整策略允许unsafe-inline脚本，不过一般测试环境不会有这么严格的限制。

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