JavaScript 未在 jsfiddle.net 上运行

Question

下面的代码可以在实时网站上运行，但我无法让它在网站 jsfiddle 上运行。

例如，请参阅此。

谁能告诉我为什么它在 jsfiddle 上不起作用？

在控制台上记录：ReferenceError：fillList未定义和ReferenceError：mySelectList未定义。

当代码作为片段嵌入此处时，您可以看到该代码的工作原理：

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>

Answer 1

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

a) （最简单、最快、不理想）- 将 function blah(){} 更改为 window.blah = function(){}; 制作函数全球的。

b) （理想的方式）- 使用不显眼的 Javascript 将行为仅从 JS 中附加到 DOM 元素，这意味着将 HTML 与 JS 分开。

c) 让 jsfiddle 不包装 onload 的内容。将 onLoad 更改为不换行（ body 或 head ）。

因此，您应该执行

而不是 var e = document.getElementById('foo'); e.onclick = lol; 仅在 JS 中。

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

Answer 2

在你的小提琴中，在左侧的下拉列表中选择no wrap (head)，然后单击“运行”，它将起作用。

查看示例 →

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

Answer 3

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

Nowrapp-in 或 Nowrap-in< /code> 在 JavaScript 设置下拉菜单中。请参阅下图。

JavaScript 设置菜单

Answer 4

看一下：

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

或者最好看看这个：

<一个href="https://stackoverflow.com/a/19110630/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字符串中的参数？