114

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

HTML：

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

JavaScript：

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

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

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

4

7 回答 7

100

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

将包装设置更改为“无包装”，它将起作用：

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

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

于 2011-04-29T09:36:44.197 回答
60

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

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

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

于 2011-03-25T10:50:28.867 回答
22

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

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

jsFiddle

细节

编辑（基于@nnnnnn 的评论）

@nnnnnn：

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

当您定义这样的函数时：

var test = function(){};

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

test = function(){};

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

为什么这行得通？

就像@zalun 说的：

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

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

test = function(){};

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

参考 ：

于 2014-02-26T10:51:30.570 回答
3

将 Frameworks & Extensions 面板中的 wrap 设置更改为“No wrap-in <body>”

于 2014-08-10T14:59:55.553 回答
-1

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

于 2014-09-12T09:32:38.937 回答
-1 
<script> 
function test(){
 alert("test");   
}
</script>

<input type="button" value="test" onclick="test()">
于 2016-01-21T08:37:55.947 回答
-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");
}
于 2015-10-26T23:35:17.347 回答