JavaScript not running on jsfiddle.net

javascript html jsfiddle
Leahcim picture Leahcim · Mar 29, 2011 · Viewed 41.2k times · Source

The code below works on a live site but I can't get it to run on the site jsfiddle .

See this for example.

Can anyone tell me why it's not working on jsfiddle?

On the console it logs: ReferenceError: fillList is not defined and ReferenceError: mySelectList is not defined.

The code works as you can see when it's embedded here as snippet:

Answer

meder omuraliev picture meder omuraliev · Mar 29, 2011

The functions you define are defined in an onload function, so whereas before they were referenceable, because they are defined in that function they can only be referenced from within that function. You reference them as globals in your HTML. You have three options

a) ( easiest, quickest, not ideal ) - change function blah(){} to window.blah = function(){}; making the functions global.

b) ( ideal way ) - use unobtrusive Javascript to attach behaviour to DOM elements from within the JS solely, meaning separate HTML from JS.

c) Make the jsfiddle not wrap the stuff onload. Change onLoad to no wrap ( body or head ).

So instead of <p onclick="lol()" id="foo"> you'd do var e = document.getElementById('foo'); e.onclick = lol; in the JS only.

I recommend b as it encourages best practices.

Related questions

Why isn't my JavaScript working in JSFiddle?

I can't find out what is the problem with this JSFiddle. HTML: <input type="button" value="test" onclick="test()"> JavaScript: function test(){alert("test");} And when I click on button - nothing happened. The console says "test not …

Read More
Adding images in JSfiddle

I want to create a fiddle in which i have to add an image.. (as a background image to a div) I tried using add resource on the left but it does not work , I also tried to give complete …

Read More
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="…

Read More