Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript not running on jsfiddle.net

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>
like image 793
Leahcim Avatar asked Mar 29 '11 05:03

Leahcim


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.

Is JSFiddle an IDE?

JSFiddle is an online IDE service and online community for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets, known as 'fiddles'. It allows for simulated AJAX calls.

What is https JSFiddle net?

jsfiddle.net is a website where you can test out some JavaScript code snippets you have, before you add them to your project, it's an excellent little test harness for ideas and trying things out.


1 Answers

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.

like image 180
meder omuraliev Avatar answered Sep 28 '22 06:09

meder omuraliev