Why does this simple JSFiddle not work?

There is some code I wanted to put into JSFiddle. It didn’t work. Narrowing it down I can’t even get this simplest of code to work:

JSFiddle

function displaymessage() {
  alert("Hello World!");
}

<form>
  <input type="button" value="Click me!" onclick="displaymessage()" />
</form>

<p>By pressing the button above, a function will be called. The function will alert a message.</p>

The alert box doesn’t show up in the JSFiddle.

Solution 1:

Select No wrap - bottom of <head> in the “Load type” dropdown in the JavaScript settings.

Screenshot of the dropdown mentioned above

Solution 2:

You need to take your function out of the onLoad/onReady otherwise it is placed inside of another scope and your button cannot access the function. In your case you need to use No wrap (head)

The code generated looks like this:

Ext.onReady(function() {
    function displaymessage()
    {
        alert("Hello World!");
    }
});

Solution 3:

Change the code to run "no wrap (head)" instead of "onDomReady". Your function isn't visible to your markup as is.

Why does this simple JSFiddle not work?

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts