为什么我的 JavaScript 在 JSFiddle 中不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5431351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why isn't my JavaScript working in JSFiddle?
提问by Larry Cinnabar
I can't find out what is the problem with this JSFiddle.
我不知道这个JSFiddle有什么问题。
HTML:
HTML：
<input type="button" value="test" onclick="test()">
JavaScript:
JavaScript：
function test(){alert("test");}
And when I click on button - nothing happened. The console says "test not defined"
当我点击按钮时 - 什么也没发生。控制台显示“未定义测试”
I've read the JSFiddle documentation - there it says that JS code is added to <head>and HTML code is added to <body>(so this JS code is earlier than html and should work).
我已经阅读了 JSFiddle 文档 - 它说添加了 JS 代码并添加了<head>HTML 代码<body>（所以这个 JS 代码早于 html 并且应该可以工作）。
采纳答案by tvanfosson
The function is being defined inside a load handler and thus is in a different scope. As @ellisbben notes in the comments, you can fix this by explicitly defining it on the windowobject. Better, yet, change it to apply the handler to the object unobtrusively: http://jsfiddle.net/pUeue/
该函数是在加载处理程序中定义的，因此在不同的范围内。正如@ellisbben 在评论中指出的那样，您可以通过在window对象上显式定义它来解决此问题。更好的是，更改它以不显眼地将处理程序应用于对象：http: //jsfiddle.net/pUeue/
$('input[type=button]').click( function() {
alert("test");
});
Note applying the handler this way, instead of inline, keeps your HTML clean. I'm using jQuery, but you could do it with or without a framework or using a different framework, if you like.
请注意，以这种方式而不是内联方式应用处理程序，可以使您的 HTML 保持干净。我正在使用 jQuery，但是如果您愿意，您可以使用或不使用框架或使用不同的框架。
回答by zalun
If you do not specify the wrap setting it defaults to "onLoad". This results with all JavaScript being wrapped in a function run after result has been loaded. All variables are local to this function thus unavailable in the global scope.
如果您未指定包装设置，则默认为“onLoad”。这导致所有 JavaScript 都被包装在一个函数中，在结果加载后运行。所有变量都是该函数的局部变量，因此在全局范围内不可用。
Change the wrapping setting to "no wrap" and it'll work:
将包装设置更改为“不包装”，它将起作用：
http://jsfiddle.net/zalun/Yazpj/1/
http://jsfiddle.net/zalun/Yazpj/1/
I switched the framework to "No Library" as you don't use any.
我将框架切换为“无库”，因为您不使用任何库。
回答by R3tep
There is another way, declare your function into a variable like this :
还有另一种方法，将您的函数声明为这样的变量：
test = function() {
alert("test");
}
Details
细节
EDIT (based on the comments of @nnnnnn)
编辑（基于@nnnnnn 的评论）
@nnnnnn :
@nnnnnn :
why saying
test =(withoutvar) would fix it ?
为什么说
test =（没有var）会解决它？
When you define a function like this :
当您定义这样的函数时：
var test = function(){};
The function is defined locally, but when you define your function without var:
该函数是在本地定义的，但是当您定义函数时没有var：
test = function(){};
testis defined on the windowobject which is at the top level scope.
testwindow在顶层作用域的对象上定义。
why does this work?
为什么这样做？
Like @zalun say :
就像@zalun 说的：
If you do not specify the wrap setting it defaults to "onLoad". This results with all JavaScript being wrapped in a function run after result has been loaded. All variables are local to this function thus unavailable in the global scope.
如果您未指定包装设置，则默认为“onLoad”。这导致所有 JavaScript 都被包装在一个函数中，在结果加载后运行。所有变量都是该函数的局部变量，因此在全局范围内不可用。
But if you use this syntax :
但是如果你使用这个语法：
test = function(){};
You have an access to the function testbecause it's defined globally
您可以访问该函数，test因为它是全局定义的
References :
参考 ：
回答by Academia
Change wrap setting in the Frameworks & Extensions panel, to "No wrap-in <body>"
将 Frameworks & Extensions 面板中的 wrap 设置更改为“No wrap-in <body>”
回答by Omjjh
There is no problem with your code.Just choose the extension onLoad() from right side.
您的代码没有问题。只需从右侧选择扩展名 onLoad() 即可。
回答by Muslim Munir
<script>
function test(){
alert("test");
}
</script>
<input type="button" value="test" onclick="test()">
回答by Ivan
Select OnDomready
HTML:
HTML：
<input id="dButton" type="button" value="test"/>
JavaScript:
JavaScript：
addEventListener('load', init, false);
function init()
{
oInput = document.getElementById('dButton');
oInput.onclick = test;
}
function test(){
alert("test");
}
