JavaScript不在jsfiddle.net上运行

下面的代码在一个活的网站上工作,但我不能让它在网站上运行jsfiddle 。

看到这个例子。

任何人都可以告诉我为什么它不工作在jsfiddle ?

在控制台上它会记录: ReferenceError: fillList is not defined并且ReferenceError: mySelectList is not defined

代码的工作原理就像你在代码片段中嵌入代码一样:

 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> 

你定义的函数是在一个onload函数中定义的,所以在它们被引用之前,因为它们被定义在这个函数中,所以它们只能在该函数中被引用。 你在HTML中引用它们作为全局变量。 你有三个选择

a)(最简单,最快,不理想) – 将function blah(){}改为window.blah = function(){}; 使功能全球化。

b)(理想的方式) – 使用不引人注目的Javascript从JS内部将行为附加到DOM元素,这意味着从JS单独的HTML。

c)使jsfiddle不包装的东西onload。 将onLoad更改为无包装(正文或正文)。

因此,你可以做var e = document.getElementById('foo'); e.onclick = lol; var e = document.getElementById('foo'); e.onclick = lol; 在JS只。

我建议b,因为它鼓励最佳做法。

在你的小提琴选择no wrap (head)在左边的下拉列表中,单击运行,它将工作。

见示例→

当选择onLoad函数在$(document).ready(function() {});的闭包内定义$(document).ready(function() {}); 只要。

我发现了相同的问题,并通过在JavaScript设置中更改“ Load Type来解决该问题:

在下拉JavaScript设置菜单中No wrap-in<body> No wrap-in<head>No wrap-in<body> 。 参考下面的图片。

JavaScript设置菜单

看着:

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

或者最好看到这个:

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

这是我测试的:

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

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

用第二种方法比较好。

PS>我来自如何从JS解析参数从JSON字符串?