JavaScript not running on jsfiddle.net

Question

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:

function BetterSelect(oSelList) {
  this.objSelectList = oSelList;
  this.objSelectList.onchange = this.selectionChanged;
}
BetterSelect.prototype.clear = function() {
  this.objSelectList.options.length = 0;
}
BetterSelect.prototype.fill = function(aValues) {
  this.clear();
  for (var i = 0; i < aValues.length; i++) {
    this.objSelectList.options[i] = new Option(aValues[i]);
  }
}
BetterSelect.prototype.find = function(strToFind, bSelect) {
  var indx = -1;
  this.objSelectList.options.selectedIndex = -1;
  for (var i = 0; i < this.getCount(); i++) {
    if (this.objSelectList.options[i].text == strToFind) {
      indx = i;
      if (bSelect)
        this.objSelectList.options.selectedIndex = i;
    }
  }
  return indx;
}
BetterSelect.prototype.getCount = function() {
  return this.objSelectList.options.length;
}
BetterSelect.prototype.selectionChanged = function() {
  alert("selection changed!");
}

var mySelectList = null;
window.onload = function() {
  mySelectList = new BetterSelect(document.getElementById('theList'));
}

function fillList() {
  mySelectList.fill(["one", "two", "three", "four", "five"]);
}

function findIt() {
  mySelectList.find(document.getElementById('txtToFind').value, true);
}

<form action="" method="post">
  <select multiple="multiple" name="Select1" id="theList" style="width: 152px; height: 226px">
  </select>
  <br />
  <input name="Button1" type="button" value="Fill The List" onclick="fillList()" />
  <input name="Button4" onclick="mySelectList.clear()" type="button" value="Clear The List" />
  <br />
  <input name="Button2" onclick="alert(mySelectList.getCount())" type="button" value="What's The Count?" />
  <br />
  <input name="Text1" type="text" id="txtToFind" />
  <input name="Button3" type="button" value="Search" onclick="findIt()" />
</form>

see also the possible duplicate Simple example doesn't work on JSFiddle — Bergi
– Bergi, Commented Mar 11, 2013 at 16:05

meder omuraliev · Accepted Answer · 2011-03-29 06:23:11Z

92

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.

edited Mar 29, 2011 at 6:23

answered Mar 29, 2011 at 5:43

meder omuraliev

187k76 gold badges401 silver badges443 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Leahcim Over a year ago

thank you. how is it then that the code works on a live site?

meder omuraliev Over a year ago

Because the functions are not defined within another function on the live site. The jsfiddle throws your JS inside a function. View source on fiddle.jshell.net/mjmitche/afPrc/show

Jonah Over a year ago

Thanks. It's pretty absurd that this workaround is required, though.

mVChr · Accepted Answer · 2011-03-29 05:54:04Z

49

In your fiddle select no wrap (head) in the dropdown on the left, click Run and it will work.

See example →

When onLoad is selected your functions are defined within the closure of the $(document).ready(function() {}); only.

edited Mar 29, 2011 at 5:54

answered Mar 29, 2011 at 5:48

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

3 Comments

Ruslan López Over a year ago

Nowrap is good option unless you're trying to read cookies from the session.

CpnCrunch Over a year ago

There doesn't seem to be any nowrap option any more, even though it's still mentioned in the docs (which appear to be out of date).

jmargolisvt Over a year ago

It's still there. It's in the settings dropdown for the Javascript pane.

theblindprophet · Accepted Answer · 2016-07-01 12:06:12Z

6

I found the same issue and solve it by changing Load Type in the JavaScript settings:

No wrap-in<head> or No wrap-in<body> in the drop down JavaScript settings menu. Refer the below image.

JavaScript Settings Menu

edited Jul 1, 2016 at 12:06

theblindprophet

7,9577 gold badges44 silver badges60 bronze badges

answered Jul 1, 2016 at 9:15

Don D

7541 gold badge9 silver badges19 bronze badges

3 Comments

CpnCrunch Over a year ago

There doesn't appear to be any javascript menu any more.

Don D Over a year ago

@CpnCrunch No. The menu is still there in the top right corner of JavaScript code section.

CpnCrunch Over a year ago

Ok thanks, you're right. I was looking at the top and left of the window. I never expected a menu option to be in one of the child windows.

Community · Accepted Answer · 2017-05-23 12:34:35Z

0

Look at:

https://stackoverflow.com/a/4935684/6796393

Or it is better to see this one:

https://stackoverflow.com/a/19110630/6796393

Here is what I tested:

function testJSON() { 
    var jsonString = '{"param1":"123","param2":"XXX78","param3":"11378"}'; 
    var tmp_obj = eval('(' + jsonString + ')');
    document.getElementById("result").innerHTML =  tmp_obj.param2;
}

and

function testJSON() { 
    var jsonString = '{"param1":"123","param2":"XXX78","param3":"11378"}'; 
    var tmp_obj = JSON.parse(jsonString);
    document.getElementById("result").innerHTML =  tmp_obj.param2;
}

It is better to use the second aproach.

P.S.> I came from How to parse parameters from JSON String using JS?

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Oct 23, 2016 at 18:23

Ye K

1431 gold badge2 silver badges9 bronze badges

Collectives™ on Stack Overflow

JavaScript not running on jsfiddle.net

4 Answers 4

3 Comments

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related