Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 406
thomasf1 Avatar asked Aug 12 '11 17:08

thomasf1


People also ask

How do I run JSFiddle code?

Entering and running code JSFiddle has the notion of panels (or tabs if you switch into the tabbed layout), there are 4 panels, 3 where you can enter code, and 1 to see the result. Once you enter code, just hit Run in the top actions bar, and the fourth panel with results will appear.

How do I make JSFiddle full screen?

Right-Click the result window in Jsfiddle. Select "This Frame" Select "Show Only This Frame" Page will reload with result only in full screen (without a "run this fiddle" banner in it.)

What does the tidy button do in JSFiddle?

You can press the Tidy button on the top panel at any time and align all the lines automatically.


2 Answers

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

Screenshot of the dropdown mentioned above

like image 147
Igor Dymov Avatar answered Sep 21 '22 23:09

Igor Dymov


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!");
    }
});
like image 22
John Kalberer Avatar answered Sep 20 '22 23:09

John Kalberer