JavaScript läuft nicht auf jsfiddle.net

74

Der folgende Code funktioniert auf einer Live-Site, aber ich kann ihn nicht auf der Site jsfiddle ausführen .

Siehe dies zum Beispiel.

Kann mir jemand sagen, warum es bei jsfiddle nicht funktioniert ?

Auf der Konsole wird Folgendes protokolliert: ReferenceError: fillList is not definedund ReferenceError: mySelectList is not defined.

Der Code funktioniert so, wie Sie sehen können, wenn er hier als Snippet eingebettet ist:

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>
Erweitern Sie das Snippet

javascript html jsfiddle Leahcim
quelle
3
siehe auch das mögliche Duplikat Einfaches Beispiel funktioniert nicht auf JSFiddle
Bergi

Antworten:

92

Die von Ihnen definierten Funktionen werden in einer Onload-Funktion definiert. Bevor sie referenzierbar waren, können sie nur innerhalb dieser Funktion referenziert werden, da sie in dieser Funktion definiert sind. Sie verweisen in Ihrem HTML-Code auf Globals. Sie haben drei Möglichkeiten

a) (einfachste, schnellste, nicht ideal) - Wechsel function blah(){}auf window.blah = function(){};die Funktionen global zu machen.

b) (idealer Weg) - Verwenden Sie unauffälliges Javascript, um das Verhalten ausschließlich innerhalb des JS an DOM-Elemente anzuhängen, dh getrenntes HTML von JS.

c) Lassen Sie die jsfiddle das Zeug nicht beim Laden einwickeln. Wechseln Sie onLoadzu keinem Wickel (Körper oder Kopf).

Also anstatt <p onclick="lol()" id="foo">nur var e = document.getElementById('foo'); e.onclick = lol;im JS.

Ich empfehle b, da es Best Practices fördert.

meder omuraliev
quelle
1
Vielen Dank. Wie kommt es dann, dass der Code auf einer Live-Site funktioniert?
Leahcim
6
Weil die Funktionen nicht in einer anderen Funktion auf der Live-Site definiert sind. Die jsfiddle wirft Ihr JS in eine Funktion. Quelle anzeigen
meder omuraliev
4
Vielen Dank. Es ist jedoch ziemlich absurd, dass diese Problemumgehung erforderlich ist.
Jonah
49

no wrap (head)Wählen Sie in Ihrer Geige in der Dropdown-Liste links auf Ausführen, und es wird funktionieren.

Siehe Beispiel →

Wenn onLoadausgewählt, werden Ihre Funktionen innerhalb des Abschlusses der $(document).ready(function() {});einzigen definiert.

mVChr
quelle
Nowrap ist eine gute Option, es sei denn, Sie versuchen, Cookies aus der Sitzung zu lesen.
Ruslan López
Es scheint keine Nowrap-Option mehr zu geben, obwohl sie immer noch in den Dokumenten erwähnt wird (die veraltet zu sein scheinen).
CpnCrunch
Es ist immernoch da. Es befindet sich in der Dropdown-Liste "Einstellungen" für den Bereich "Javascript".
jmargolisvt
6

Ich habe das gleiche Problem gefunden und es durch Ändern Load Typeder JavaScript-Einstellungen gelöst :

No wrap-in<head>oder No wrap-in<body>im Dropdown-Menü JavaScript-Einstellungen. Siehe das folgende Bild.

JavaScript-Einstellungsmenü

Don D.
quelle
Es scheint kein Javascript-Menü mehr zu geben.
CpnCrunch
@CpnCrunch Nein. Das Menü befindet sich immer noch in der oberen rechten Ecke des JavaScript-Codeabschnitts.
Don D
Ok danke, du hast recht. Ich schaute oben und links vom Fenster. Ich hätte nie erwartet, dass sich eine Menüoption in einem der untergeordneten Fenster befindet.
CpnCrunch
0

Ansehen:

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

Oder es ist besser, diesen zu sehen:

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

Folgendes habe ich getestet:

function testJSON() { 
    var jsonString = '{"param1":"123","param2":"XXX78","param3":"11378"}'; 
    var tmp_obj = eval('(' + jsonString + ')');
    document.getElementById("result").innerHTML =  tmp_obj.param2;
}

und 

function testJSON() { 
    var jsonString = '{"param1":"123","param2":"XXX78","param3":"11378"}'; 
    var tmp_obj = JSON.parse(jsonString);
    document.getElementById("result").innerHTML =  tmp_obj.param2;
}

Es ist besser, den zweiten Ansatz zu verwenden.

PS> Ich kam von Wie analysiere ich Parameter von JSON String mit JS?

Ye K.
quelle