Question

我无法找到这个JSFiddle的问题。

HTML：

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

JavaScript的：

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

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

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

Answer 1

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

将换行设置更改为“无换行”，它将起作用：

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

我将框架切换到“No Library”，因为你没有使用任何文件。

Answer 2

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

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

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

Answer 3

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

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

jsFiddle

详细

编辑（根据@nnnnnn的评论）

@nnnnnn：

为什么说test =（没有var）会修复它？

定义这样的函数时：

var test = function(){};

该函数是在本地定义的，但是在没有var：

的情况下定义函数时

test = function(){};

test在window对象上定义，该对象位于顶级范围。

为什么这样做？

像@zalun一样说：

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

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

test = function(){};

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

参考文献：

Answer 4

更改框架中的换行设置＆amp;扩展程序面板，为“No wrap-in <body>”

Answer 5

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

Answer 6

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

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

Answer 7

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

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

7 个答案:

详细