为什么我的 JavaScript 在 JSFiddle 中不起作用？
[英]Why isn't my JavaScript working in JSFiddle?
问题描述
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 并且应该可以工作）。
7 个解决方案
解决方案1
100 2011-04-29 09:36:44
If you do not specify the wrap setting it defaults to "onLoad".如果您未指定包装设置，则默认为“onLoad”。 This results with all JavaScript being wrapped in a function run after result has been loaded.这导致所有 JavaScript 都被包装在一个函数中，在结果加载后运行。 All variables are local to this function thus unavailable in the global scope.所有变量都是该函数的局部变量，因此在全局范围内不可用。
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.我将框架切换为“无库”，因为您不使用任何库。
解决方案2
60 已采纳 2011-03-25 10:50:28
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 window object.正如@ellisbben 在评论中指出的那样，您可以通过在window对象上显式定义它来解决此问题。 Better, yet, change it to apply the handler to the object unobtrusively: http://jsfiddle.net/pUeue/更好的是，更改它以不显眼地将处理程序应用于对象： http : //jsfiddle.net/pUeue/
$('input[type=button]').click( function() {
alert("test");
});
Note applying the handler this way, instead of inline, keeps your HTML clean.请注意，以这种方式而不是内联方式应用处理程序，可以使您的 HTML 保持干净。 I'm using jQuery, but you could do it with or without a framework or using a different framework, if you like.我正在使用 jQuery，但如果您愿意，您可以使用或不使用框架或使用不同的框架。
解决方案3
22 2014-02-26 10:51:30
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(){};
test is defined on the window object which is at the top level scope. test是在顶层范围的window对象上定义的。
why does this work?
Like @zalun say :就像@zalun 说的：
If you do not specify the wrap setting it defaults to "onLoad".
But if you use this syntax :但是如果你使用这个语法：
test = function(){};
You have an access to the function test because it's defined globally您可以访问功能test因为它是全局定义的
References :参考 ：
解决方案4
3 2014-08-10 14:59:55
将 Frameworks & Extensions 面板中的 wrap 设置更改为“No wrap-in <body> ”
解决方案5
-1 2014-09-12 09:32:38
您的代码没有问题。只需从右侧选择扩展名 onLoad() 即可。
解决方案6
-1 2016-01-21 08:37:55
<script>
function test(){
alert("test");
}
</script>
<input type="button" value="test" onclick="test()">
解决方案7
-3 2015-10-26 23:35:17
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");
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.