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字符串？
