为什么这段代码在这里工作，但在 JSFiddle 上不起作用

Why is this code working here but not on JSFiddle

本文关键字：工作 但在 JSFiddle 不起作用 在这里 段代码 代码 为什么      更新时间：2023-09-26

我有一个简单的代码，它没有任何问题，它在这里运行，但不在JSFiddle上运行。在检查控制台时，我发现以下错误



Uncaught ReferenceError: fn is not defined链接到小提琴

var fn = {
  one: function() {
    alert('1')
  },
  two: function() {
    alert('2')
  },
  three: function() {
    alert('3')
  }
};
<button onclick='fn.one()'>1</button>
<button onclick='fn.two()'>2</button>
<button onclick='fn.three()'>3</button>

这是因为 jsfiddle 在闭包中沙箱化了你的代码。

你

可以看到你写了var fn（它制作了一个本地var），只需删除var语句以使其全局化，您就可以像现在这样称呼它。

不过，我建议您使用addEventListener().

这只是

一个JSFiddle功能。 默认情况下，JSFiddle 将所有代码包装在 $(document).ready() 处理程序中。 要让你的JS脱离包装器并回到普通DOM的流程中，只需选择"框架和扩展"下的JSFiddle选项，并将其从"onLoad"更改为"No wrap - in head"或"no wrap - in body"

将 jsfiddle 中的下拉列表从 onLoad 更改为无换行 - 在头部或无换行 - 在正文中。

将左侧的选项从 onLoad 更改为no wrap之一（即 no wrap - in <head>或no wrap - in <body>选项，它可以毫无问题地运行。

jsfiddle 上的这段代码不起作用，因为这就是变量作用域在 JavaScript 中的工作方式。

你可以看到，如果我只改变几个字符

var fn = // the rest of code ...

自

window.fn = // the rest of code ...

您的示例"正确"工作 - http://jsfiddle.net/v3gsmnvq/7/

在 SO 上阅读有关作用域的信息：JavaScript 中变量的作用域是什么？

相关文章：