it-swarm.com.de

JavaScript läuft nicht auf jsfiddle.net

Der folgende Code funktioniert auf einer Live-Site, kann jedoch nicht auf der Site jsfiddle ausgeführt werden.

Siehe zum Beispiel this .

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

In der Konsole werden folgende Protokolle protokolliert: ReferenceError: fillList is not defined und 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>

69
Leahcim

Die Funktionen, die Sie definieren, werden in einer Onload-Funktion definiert. Bevor sie also referenzierbar waren, können sie nur von dieser Funktion aus referenziert werden, da sie in dieser Funktion definiert sind. Sie referenzieren sie als Globals in Ihrem HTML. Sie haben drei Möglichkeiten

a) (am einfachsten, schnellsten, nicht ideal) - Ändern Sie function blah(){} in window.blah = function(){};, um die Funktionen global zu machen.

b) (idealer Weg) - Verwenden Sie unaufdringliches Javascript, um das Verhalten von DOM-Elementen ausschließlich innerhalb der JS anzuhängen, dh, es ist ein separater HTML-Code von JS erforderlich. 

c) Stellen Sie sicher, dass die jsfiddle-Datei nicht vollständig geladen wird. Ändern Sie onLoad in keine Hülle (Körper oder Kopf).

Anstelle von <p onclick="lol()" id="foo"> würden Sie var e = document.getElementById('foo'); e.onclick = lol; nur in der JS ausführen.

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

88
meder omuraliev

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

Siehe Beispiel →

Wenn onLoad ausgewählt ist, werden Ihre Funktionen nur innerhalb der Schließung von $(document).ready(function() {}); definiert.

48
mVChr

Ich habe das gleiche Problem gefunden und habe es gelöst, indem ich Load Type in den JavaScript-Einstellungen geändert habe:

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

JavaScript-Einstellungsmenü

5
Don D

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.

P.S.> Ich kam aus Wie analysiere ich Parameter von JSON String mit JS?

0