为什么我的JavaScript无法在JSFiddle中工作？

114

我找不到这个JSFiddle有什么问题。

HTML：

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

JavaScript：

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

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

我已经阅读了JSFiddle文档-那里说JS代码已添加到<head>并且HTML代码已添加到<body>（因此，此JS代码早于html，应该可以使用）。

javascript html jsfiddle

— 拉里（Larry Cinnabar）
source

在正常情况下，删除括号也可以使用，尽管将js与HTML尽可能分开绝对是一个好建议。我只允许自己使用样式=“ display：none” CSS inline no-no。

— 阿德里安·巴塞洛缪

相关：JavaScript不在jsfiddle.net上运行

— Bergi 2013年

60

该函数是在装入处理程序中定义的，因此属于不同的范围。正如@ellisbben在注释中指出的那样，您可以通过在window对象上显式定义它来解决此问题。更好的是，更改它以将处理程序毫不干扰地应用于对象：http : //jsfiddle.net/pUeue/

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

请注意，以这种方式而不是内联方式应用处理程序，可以使您的HTML保持整洁。我使用的是jQuery，但您可以在有或没有框架的情况下使用它，也可以使用其他框架。

— 特凡福森
source

@Innuendo-jsFiddle对代码/ html /样式表使用单独的框架。您需要在函数调用中引用该框架，但是实际上并没有一种简单的方法可以执行此操作，因为框架没有名称。由于jsfiddle的工作方式，这确实是一个问题，但将JavaScript完全分开仍然是一个好主意。

— tvanfosson 2011年

5

@ tvanfosson-您的解决方案有效，但是jsfiddle不使用单独的框架来显示结果；参见jsfiddle.net/Yazpj/show。最初不起作用的原因是test在函数内部定义的onLoad。使用window.test = function(){/*...*/}使它完美地工作。

— ellisbben

@ellisbben-如果我使用Firebug检查DOM，则4个单独的窗格中的每个窗格都存在于单独的iframe中。

— tvanfosson 2011年

1

是的，但是如果您检查用于显示示例的单个iframe，则会看到它将所有代码放在不使用框架的单个页面中，因此这些框架不会破坏您的示例。附加show到任何jsfiddle URL可以查看我在说什么：jsfiddle.net/Yazpj/show

— ellisbben 2011年

100

如果未指定换行设置，则默认为“ onLoad”。结果是所有JavaScript都包装在加载结果后运行的函数中。所有变量都是该函数的局部变量，因此在全局范围内不可用。

将包装设置更改为“不包装”即可使用：

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

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

— 扎伦
source

22

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

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

jsFiddle

细节

编辑（基于@nnnnnn的评论）

@nnnnnn：

为什么说test =（无var）会解决？

当您定义这样的函数时：

var test = function(){};

该函数在本地定义，但是在定义函数时不带var：

test = function(){};

testwindow在顶级范围的对象上定义。

为什么这样做？

就像@zalun那样说：

如果未指定换行设置，则默认为“ onLoad”。结果是所有JavaScript都包装在加载结果后运行的函数中。所有变量都是该函数的局部变量，因此在全局范围内不可用。

但是，如果您使用以下语法：

test = function(){};

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

参考文献：

— R3tep
source

2

实际上，这是最简单的方法，您只需要在JSFiddle中测试少量代码即可。

— DOK 2014年

但是为什么这样做呢？您提供的“更多信息”链接并不能说明问题与范围有关，也不能解释为什么test = （没有var）可以解决该问题。

— nnnnnn 2015年

@ R3tep好，您的第一个链接是：jsfiddle.net/R3tep/Yazpj/1406 alert对我没有任何帮助。我在镀铬。

— 2013年

@ R3tep是的，它与console.log一起使用。我将在SO上发布一个问题，因为我认为没有警告框这一事实与iframe遇到的另一个问题有关。

— 2013年

1

@ R3tep我认为您误解了我，但我不确定。您的代码是好的。JSFiddle的编码方式存在问题（它们用来显示结果的iframe的沙箱属性中缺少值）。这使得它无法在某些版本的chrome上运行。我在他们的github上发送了一个问题报告。我对此非常感兴趣，因为我认为我在网站上遇到的问题相同但没有。干杯。

— 2013年

3

在“框架和扩展”面板中将自动换行设置更改为“无自动换行<body>”

— 学术界
source

-1

您的代码没有问题，只需从右侧选择扩展名onLoad（）。

— 奥姆杰
source

-1

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

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

— 穆斯林穆尼尔
source

-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");
}

— 伊万
source