{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 永恒的永恒 的问题《JavaScript not running on jsfiddle.net》','https://www.manongdao.com/q-7168.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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>
In your fiddle select
no wrap (head)in the dropdown on the left, click Run and it will work.See example →
When
onLoadis selected your functions are defined within the closure of the$(document).ready(function() {});only.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:
and
It is better to use the second aproach.
P.S.> I came from How to parse parameters from JSON String using JS?
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(){}towindow.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
onLoadto no wrap ( body or head ).So instead of
<p onclick="lol()" id="foo">you'd dovar e = document.getElementById('foo'); e.onclick = lol;in the JS only.I recommend b as it encourages best practices.
I found the same issue and solve it by changing
Load Typein the JavaScript settings:No wrap-in<head>orNo wrap-in<body>in the drop down JavaScript settings menu. Refer the below image.JavaScript Settings Menu