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

Question

我找不到这个 JSFiddle 的问题。

HTML：

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

JavaScript：

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

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

我已阅读 JSFiddle 文档 - 它说 JS 代码已添加到 中，HTML 代码已添加到 < /code> （所以这个 JS 代码早于 html 并且应该可以工作）。

Answer 1

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

将环绕设置更改为“不环绕”，它将起作用：

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

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

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，因为它是全局定义的

---

参考：

• https://stackoverflow.com/a/338053/3083093
• https://stackoverflow.com/ a/5830423/3083093

Answer 4

更改框架中的换行设置扩展面板，设置为“无封装 ”

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