为什么我的 JavaScript 不能在 JSFiddle 中运行？答案

【问题标题】：Why isn't my JavaScript working in JSFiddle?为什么我的 JavaScript 不能在 JSFiddle 中运行？
【发布时间】：2011-07-22 19:51:38
【问题描述】：

我不知道这个JSFiddle 有什么问题。

HTML：

<input type="button" value="test" onclick="test()">

JavaScript：

function test(){alert("test");}

当我点击按钮时 - 什么也没发生。控制台显示“未定义测试”

我已经阅读了 JSFiddle 文档 - 那里说 JS 代码被添加到 <head> 和 HTML 代码被添加到 <body> （所以这个 JS 代码早于 html 并且应该可以工作）。

【问题讨论】：

删除括号在正常的非小提琴情况下也可以工作，尽管尽可能将 js 与 HTML 分开绝对是个好建议。我只允许自己使用 style="display:none" CSS inline no-no。
相关：JavaScript not running on jsfiddle.net

标签： javascript html jsfiddle

【解决方案1】：

还有另一种方法，将你的函数声明为这样的变量：

test = function() {
  alert("test");
}

jsFiddle

详情

编辑（基于 @nnnnnn 的 cmets）

@nnnnnn：

为什么说test =（没有var）会解决它？

当你定义这样的函数时：

var test = function(){};

该函数是在本地定义的，但是当您在没有var 的情况下定义函数时：

test = function(){};

test 是在顶级范围内的 window 对象上定义的。

为什么会这样？

就像@zalun 说的：

如果您不指定换行设置，则默认为“onLoad”。这导致所有 JavaScript 都被包装在一个函数中，在结果加载后运行。所有变量都是此函数的本地变量，因此在全局范围内不可用。

但是如果你使用这种语法：

test = function(){};

您可以访问函数test，因为它是全局定义的

参考文献：

【讨论】：

这确实是最简单的方法，您只是在 JSFiddle 中测试一小段代码。
但是为什么这行得通？您提供的“更多信息”链接没有说明问题与范围有关，或者为什么说test = （没有var）会解决它。
@R3tep 你的第一个链接是：jsfiddle.net/R3tep/Yazpj/1406 alert 对我没有任何作用。我在 chrome 上。
@R3tep 是的，它适用于 console.log。我将在 SO 上发布一个问题，因为我相信我没有警报框这一事实与我在 iframe 中遇到的另一个问题有关。
@R3tep 我想你误解了我，但我不确定。你的代码是/很好。 JSFiddle 的编码方式存在问题（他们用来显示结果的 iframe 的沙盒属性中缺少值）。这使得它无法在某些版本的 chrome 上运行。我在他们的 github 上发送了问题报告。我对此非常感兴趣，因为我认为我在我的网站上遇到的问题是相同的，但不是。干杯。

【解决方案2】：

<script> 
function test(){
 alert("test");   
}
</script>

<input type="button" value="test" onclick="test()">

【讨论】：

【解决方案3】：

Select OnDomready

HTML：

<input id="dButton" type="button" value="test"/>

JavaScript：

addEventListener('load', init, false);

function init()
{
  oInput = document.getElementById('dButton');
  oInput.onclick = test;
}

function test(){
  alert("test");
}

【讨论】：

【解决方案4】：

将“框架和扩展”面板中的 wrap 设置更改为“No wrap-in <body>”

【讨论】：

【解决方案5】：

函数是在负载处理程序中定义的，因此在不同的范围内。正如 @ellisbben 在 cmets 中所指出的，您可以通过在 window 对象上显式定义它来解决此问题。更好的是，将其更改为不显眼地将处理程序应用于对象：http://jsfiddle.net/pUeue/

$('input[type=button]').click( function() {
   alert("test");   
});

注意以这种方式应用处理程序，而不是内联，可以保持您的 HTML 干净。我使用的是 jQuery，但如果你愿意，你可以使用或不使用框架或使用不同的框架。

【讨论】：

@Innuendo - jsFiddle 为代码/html/样式表使用单独的框架。您需要在函数调用中引用框架，但实际上并没有一种简单的方法可以做到这一点，因为框架没有名称。由于 jsfiddle 的工作方式，这确实是一个问题，但将您的 javascript 完全分开仍然是一个好主意。
@tvanfosson-您的解决方案有效，但 jsfiddle 不使用单独的框架来显示结果；见jsfiddle.net/Yazpj/show。它最初不起作用的原因是test 是在onLoad 函数内部定义的；使用window.test = function(){/*...*/} 使其运行良好。
@ellisbben - 如果我使用 Firebug 检查 DOM，则 4 个单独的窗格中的每一个都存在于单独的 iframe 中。
是的，但是如果您检查用于显示示例的单个 iframe，您会发现它将所有代码放在不使用框架的单个页面中，因此这些框架不会破坏您的例子。将show 附加到任何 jsfiddle URL 以查看我在说什么：jsfiddle.net/Yazpj/show

【解决方案6】：

您的代码没有问题。只需从右侧选择扩展 onLoad() 即可。

【讨论】：

【解决方案7】：

如果您不指定换行设置，则默认为“onLoad”。这导致所有 JavaScript 都被包装在一个函数中，在结果加载后运行。所有变量都是此函数的本地变量，因此在全局范围内不可用。

将换行设置更改为“不换行”即可：

http://jsfiddle.net/zalun/Yazpj/1/

我将框架切换为“无库”，因为您不使用任何库。

【讨论】：