JavaScript无法在jsfiddle.net上运行


74

以下代码可在实时站点上运行,但无法在jsfiddle站点上运行

参见示例。

谁能告诉我为什么它不能在jsfiddle运行

在控制台上,它记录:ReferenceError: fillList is not definedReferenceError: 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>


3
另请参见可能的重复简单示例在JSFiddle上不起作用
Bergi 2013年

Answers:


92

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

a)(最简单,最快,最不理想)-更改function blah(){}window.blah = function(){};使功能全局化。

b)(理想方式)-使用不引人注目的Java脚本将行为仅从JS内附加到DOM元素,这意味着将HTML与JS分开。

c)使jsfiddle不包装东西。更改onLoad为不缠绕(身体或头部)。

因此,<p onclick="lol()" id="foo">您不必var e = document.getElementById('foo'); e.onclick = lol;只在JS中进行操作。

我推荐b,因为它鼓励最佳做法。


1
谢谢。那么代码在实时站点上如何工作?
Leahcim

6
因为这些功能未在实时站点的另一个功能中定义。jsfiddle将您的JS放在函数内。在fiddle.jshell.net/mjmitche/afPrc/show
meder omuraliev,2011年

4
谢谢。但是,这种解决方法是必需的,这很荒谬。
约拿(Jonah)2016年

49

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

参见示例→

onLoad选择你的功能的关闭中定义$(document).ready(function() {});而已。


除非您尝试从会话中读取Cookie,否则Nowrap是一个不错的选择。
RuslanLópez2015年

尽管文档中仍然提到了nowrap选项(似乎已经过时),但似乎不再有nowrap选项。
CpnCrunch'2

它仍然在那里。在Javascript窗格的设置下拉列表中。
jmargolisvt

6

我发现了相同的问题,并通过更改Load TypeJavaScript设置解决了该问题:

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

JavaScript设置菜单


似乎没有任何JavaScript菜单了。
CpnCrunch '17

@CpnCrunch否。菜单仍然位于JavaScript代码部分的右上角。
唐D

好的,谢谢。我看着窗户的顶部和左侧。我从没想到菜单选项会出现在其中一个子窗口中。
CpnCrunch'2

0

看着:

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字符串解析参数?

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.