Jsfiddle: No Connection Between HTML and Js? Can't Call Simple Function from Button

jsFiddle: no connection between html and js? Can't call simple function from button?

Just change the way the JavaScript block is loaded to no wrap (head)

Sample Image

The standard setting here is that the JS is wrapped(!) to be run after the DOM has loaded. That means the function is not defined in global scope but inside the wrapper. Inline event handlers only work with globally defined functions though!

When setting to no wrap (head) the JS is loaded in the <head> and is not wrapped.

Why this JSFiddle does not work

Select no wrap - in <head>/<body> .

It doesn't work because clickedMe is not in the global scope.

Sample Image

JSFiddle does not manage click events inside a function

This is correct behaviour. The reason this happens is because you bind the event click when you call the foo function. The first time you call foo you bind the event, the second time you bind it again and so on. Binding an event doesn't remove the previous bind, so if you click submit 10 times, you will bind 10 different click eventhandlers, all doing the same thing and you'll receive 'click2' 10 times in the console.

Why isn't my JavaScript working in JSFiddle?

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.

javascript runs on w3schools.com but not on jsfiddle.net?

Sample Image

Change load type to No wrap in - <body>

Here is updated fiddle

Here is Docs

html button not calling its onclick js function

The problem is specific to JSFiddle. You need to change the LOAD TYPE to No wrap - bottom of <body>.

When using onLoad, the function won't become global one, so you can't invoke it directy from HTML. If it is global - like when using no-wrap - it works.

here

Jsfiddle: No Connection Between HTML and Js? Can't Call Simple Function from Button