JavaScript不在jsfiddle.net上运行 [英] JavaScript not running on jsfiddle.net

问题描述

下面的代码在一个实时网站上工作，但我无法在网站 jsfiddle 上运行。

例如，请参阅这个。

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

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

代码的工作原理可以在嵌入代码片段时看到：

 函数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  

 < form action =method =post> < select multiple =multiplename =Select1id =theListstyle =width：152px; height：226px> < /选择> < br /> < input name =Button1type =buttonvalue =填充列表onclick =fillList（）/> < input name =Button4onclick =mySelectList.clear（）type =buttonvalue =清除列表/> < br /> < input name =Button2onclick =alert（mySelectList.getCount（））type =buttonvalue =什么是计数？ /> < br /> < input name =Text1type =textid =txtToFind/> < input name =Button3type =buttonvalue =Searchonclick =findIt（）/>< / form>  

定义的函数在onload函数中定义，所以在它们可以被引用之前，因为它们是可以引用的在该函数中定义，它们只能从该函数内引用。您在HTML中将它们引用为全局变量。你有三个选择：
$ b $ a）（最简单，最快，不理想） - 更改函数blah（）{} 到 window.blah = function（）{}; 使函数成为全局函数。 - 使用不显眼的Javascript将行为附加到JS内部的DOM元素上，这意味着单独的JS来自HTML。

让jsfiddle不包装东西onload。将 onLoad 更改为不换行（body或head）。 因此，< p onclick =lol（）id =foo> 你会做 var e = document.getElementById（'foo'）; e .onclick = lol; 仅限于JS。

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

The code below works on a live site but I can't get it to run on the site jsfiddle .

See this for example.

Can anyone tell me why it's not working on jsfiddle?

On the console it logs: ReferenceError: fillList is not defined and ReferenceError: mySelectList is not defined.

The code works as you can see when it's embedded here as snippet:

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>

解决方案

The functions you define are defined in an onload function, so whereas before they were referenceable, because they are defined in that function they can only be referenced from within that function. You reference them as globals in your HTML. You have three options

a) ( easiest, quickest, not ideal ) - change function blah(){} to window.blah = function(){}; making the functions global.

b) ( ideal way ) - use unobtrusive Javascript to attach behaviour to DOM elements from within the JS solely, meaning separate HTML from JS.

c) Make the jsfiddle not wrap the stuff onload. Change onLoad to no wrap ( body or head ).

So instead of <p onclick="lol()" id="foo"> you'd do var e = document.getElementById('foo'); e.onclick = lol; in the JS only.

I recommend b as it encourages best practices.

这篇关于JavaScript不在jsfiddle.net上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！