JavaScript 未在 jsfiddle.net 上运行

IT技术 javascript html jsfiddle
2021-01-10 13:29:47

下面的代码适用于一个实时站点，但我无法让它在站点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>

4个回答

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

a)（最简单、最快、不理想）- 更改function blah(){}为window.blah = function(){};使函数全局化。

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

c) 使 jsfiddle 不会在加载时包装东西。更改onLoad为无包裹（ body 或 head ）。

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

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

谢谢。那么代码如何在实时站点上工作？
2021-03-12 13:29:47
谢谢。不过，这种解决方法是必需的，这是非常荒谬的。
2021-03-21 13:29:47
因为这些函数没有在实时站点上的另一个函数中定义。jsfiddle 将您的 JS 放入一个函数中。在fiddle.jshell.net/mjmitche/afPrc/show上查看源代码
2021-04-07 13:29:47

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

参见示例 →

当onLoad被选中时，你的函数是在$(document).ready(function() {});唯一的闭包内定义的。

除非您尝试从会话中读取 cookie，否则 Nowrap 是不错的选择。
2021-03-18 13:29:47
似乎不再有任何 nowrap 选项，即使它仍然在文档中提到（似乎已经过时）。
2021-03-18 13:29:47
它仍然存在。它位于 Javascript 窗格的设置下拉列表中。
2021-04-03 13:29:47

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

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

JavaScript 设置菜单

好的，谢谢，你说得对。我正在看窗户的顶部和左侧。我从没想过一个菜单选项会出现在其中一个子窗口中。
2021-03-13 13:29:47
@CpnCrunch 否。菜单仍然在 JavaScript 代码部分的右上角。
2021-03-26 13:29:47
似乎不再有任何 javascript 菜单。
2021-03-28 13:29:47

看着：

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> 我来自How to parse parameters from JSON String using JS?

其它你可能感兴趣的问题
上一篇jqgrid 在编辑框中不正确的选择下拉选项值 下一篇为什么相等检查不适用于数组