Why is this code working here but not on JSFiddle

Question

I have this simple code which has nothing wrong with it and it runs here but not on JSFiddle. On inspecting the console I find the following error

Uncaught ReferenceError: fn is not defined

LINK TO FIDDLE

var fn = {
  one: function() {
    alert('1')
  },
  two: function() {
    alert('2')
  },
  three: function() {
    alert('3')
  }
};

<button onclick='fn.one()'>1</button>
<button onclick='fn.two()'>2</button>
<button onclick='fn.three()'>3</button>

try to include jquery cdn in top of html section – Smile0ff Dec 16 '14 at 23:39 — Smile0ff, Dec 16 '14 at 23:39
jQuery has nothing to do with this – Anubhav Dec 16 '14 at 23:39 — Anubhav, Dec 16 '14 at 23:39

score 1 · Answer 1 · answered Dec 16 '14 at 23:42

This is just a JSFiddle feature. JSFiddle, by default, wraps all your code in a $(document).ready() handler. To get your JS out of the wrapper and back into the flow of the normal DOM, just select the JSFiddle option under 'Frameworks & Extensions' and change it from 'onLoad' to 'No wrap - in head' or 'No wrap - in body'

score 1 · Answer 2 · answered Dec 16 '14 at 23:43

1

Change the drop down in jsfiddle from onLoad to No wrap - in head OR No wrap - in body.

answered Dec 16 '14 at 23:43

Woodchipper

530
6
12

score 1 · Answer 3 · answered Dec 16 '14 at 23:43

1

Change the option on the left from onLoad to one of the no wrap (i.e. no wrap - in <head> or no wrap - in <body> options and it runs with no problems.

answered Dec 16 '14 at 23:43

Chris Franklin

3,864
2
16
19

score 1 · Accepted Answer · answered Dec 16 '14 at 23:45

It's because jsfiddle sandboxes your code in a closure.

You can see that you wrote var fn (which makes a local var), just remove the var statement to make it global and you will be able to call it the way you are now.

Though, I'd advise you to use addEventListener().

score 1 · Answer 5 · edited May 23 '17 at 12:12

1

This code on jsfiddle doesnt work because this is how scope of variables works in JavaScript.

You can see that if I change only a few characters from

var fn = // the rest of code ...

to

window.fn = // the rest of code ...

Your example works "correctly" - http://jsfiddle.net/v3gsmnvq/7/

Read about scopes even here on SO: What is the scope of variables in JavaScript?

edited May 23 '17 at 12:12

Community

1
1

answered Dec 16 '14 at 23:49

Dawid Karabin

5,113
1
23
31

Why is this code working here but not on JSFiddle

5 Answers5