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>

41853 次浏览
小开
最佳答案

您定义的函数是在 onload 函数中定义的，因此在此之前它们是可引用的，因为它们是在该函数中定义的，所以只能从该函数中引用它们。在 HTML 中将它们引用为全局变量。你有三个选择

A)(最简单、最快捷、不理想)-将 function blah(){}改为 window.blah = function(){};，使函数全局化。

B)(理想的方法)-使用 Unobtrusive JavaScript 将行为附加到来自 JS 内部的 DOM 元素上，这意味着将 HTML 与 JS 分开。

C)使 jsfiddle 不包装的东西上载。改变 onLoad没有包装(身体或头部)。

所以你只能在 JS 中做 var e = document.getElementById('foo'); e.onclick = lol;而不是 <p onclick="lol()" id="foo">。

我推荐 b，因为它鼓励最佳实践。

小开

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

见例子 & # x2192;

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

小开

我发现了同样的问题，并通过改变 JavaScript 设置中的 Load Type来解决它:

在下拉 JavaScript 设置菜单中的 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;
}

最好使用第二种方法。

附注: 我来自 如何使用 JS 从 JSON 字符串解析参数？


提交答案