Warum funktioniert mein JavaScript-Code lokal, aber nicht auf JSfiddle.net?

JavaScript läuft nicht auf JSfiddle.net

Problem:

Der bereitgestellte Code funktioniert auf einer Live-Site ordnungsgemäß, schlägt jedoch fehl auf JSfiddle.net auszuführen, was zu Konsolenfehlern wie „ReferenceError: fillList is not definiert“ und „ReferenceError: mySelectList is not definiert“ führt.

Erklärung:

Im angegebenen Code sind die Funktionen innerhalb einer Onload-Funktion definiert. Dies ermöglicht zwar die Referenzierung der Funktionen innerhalb dieser Funktion, der globale Zugriff ist jedoch nicht möglich. Wenn Sie diese Funktionen aus dem HTML heraus mit ihren globalen Namen (z. B. fillList() und mySelectList) referenzieren, kann JSfiddle sie daher nicht erkennen.

Lösungen:

Es gibt drei Hauptlösungen für dieses Problem:

a) Funktionen globalisieren:

<code class="javascript">window.fillList = function() {};
window.mySelectList = function() {};</code>

Dieser Ansatz macht die Funktionen global, ist aber nicht ideal, da er die verschmutzt globaler Namespace.

b) Verwenden Sie unaufdringliches JavaScript:

Definieren Sie Funktionen außerhalb der Onload-Funktion und hängen Sie Ereignis-Listener allein mit JavaScript an:

<code class="javascript">function fillList() {}
function mySelectList() {}

window.onload = function() {
  var e = document.getElementById('elementId');
  e.addEventListener('click', fillList);
};</code>

Diese Trennung von HTML und JavaScript ist eine bewährte Methode.

c) Ändern Sie die JSfiddle-Einstellungen:

Ändern Sie die JSfiddle-Einstellungen auf „Kein Wrap (Kopf oder Körper)“. Verhindern Sie, dass der Code in eine Onload-Funktion eingeschlossen wird. Dadurch sind die Funktionen global zugänglich.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein JavaScript-Code lokal, aber nicht auf JSfiddle.net?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!