Why isn't my JavaScript working in JSFiddle?

2018-12-31 00:18发布

站内问答 / JavaScript
902 7 5

I can't find out what is the problem with this JSFiddle.

HTML:

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

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).

7条回答
余生请多指教
2楼-- · 2018-12-31 00:34

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. Better, yet, change it to apply the handler to the object unobtrusively: 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.

查看更多
0人赞 添加讨论(0) 举报
泛滥B
3楼-- · 2018-12-31 00:37

Change wrap setting in the Frameworks & Extensions panel, to "No wrap-in <body>"

查看更多
0人赞 添加讨论(0) 举报
还给你的自由
4楼-- · 2018-12-31 00:50

There is another way, declare your function into a variable like this :

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

jsFiddle

Details

EDIT (based on the comments of @nnnnnn)

@nnnnnn :

why saying test = (without var) would fix it ?

When you define a function like this :

var test = function(){};

The function is defined locally, but when you define your function without var :

test = function(){};

test is defined on the window object which is at the top level scope.

why does this work?

Like @zalun say :

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.

But if you use this syntax :

test = function(){};

You have an access to the function test because it's defined globally

References :

查看更多
0人赞 添加讨论(0) 举报
低头抚发
5楼-- · 2018-12-31 00:51 
<script> 
function test(){
 alert("test");   
}
</script>

<input type="button" value="test" onclick="test()">
查看更多
0人赞 添加讨论(0) 举报
十年一品温如言
6楼-- · 2018-12-31 00:53

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.

Change the wrapping setting to "no wrap" and it'll work:

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

I switched the framework to "No Library" as you don't use any.

查看更多
0人赞 添加讨论(0) 举报
残风、尘缘若梦
7楼-- · 2018-12-31 00:58

There is no problem with your code.Just choose the extension onLoad() from right side.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)