Sorry, really stupid question here. If you post a question about javascript or jquery, people often say - create a jsfiddle.

So, I did. My question will be about getting divs to slide up using jquery but, I can't even get a basic javascript function to run in jsfiddle.

/

<div onclick="showit()">Hello</div>
function showit()
{
alert('hi');
}

A div, click on it to call a javascript function, but jsfiddle says the function is not defined. Can you not do this in jsfiddle?

Sorry, really stupid question here. If you post a question about javascript or jquery, people often say - create a jsfiddle.

So, I did. My question will be about getting divs to slide up using jquery but, I can't even get a basic javascript function to run in jsfiddle.

http://jsfiddle/ubq6E/

<div onclick="showit()">Hello</div>
function showit()
{
alert('hi');
}

A div, click on it to call a javascript function, but jsfiddle says the function is not defined. Can you not do this in jsfiddle?

• javascript
• alert

• 2 Yes, change where the JS is included: jsfiddle/ubq6E/1 – James Allardice Commented Mar 21, 2013 at 9:20
• 2 See the second select box on the left hand side, at the top? Also inspecting the source of the result frame could give some insights. You can find more information in the documentation: doc.jsfiddle/basic/…. – Felix Kling Commented Mar 21, 2013 at 9:20
• Thank you both - thought it was about time I gave up this lark. – Martin Smellworse Commented Mar 21, 2013 at 9:29

1 Answer 1

You've selected the default onLoad option in jsfiddle.

This causes the site to wrap your entire code within a callback function, meaning that your showit function is not a global function as required by DOM0 inline event handlers.

There are several work arounds, in my personal order of preference:

1. don't use DOM0 inline handlers, they're really old school - look into element.addEventListener() instead and separate your markup from your JS.

2. use window.showit = function() { ... } instead to force your function to appear in the global name space.

3. select one of the "no wrap" options