web-dev-qa-db-de.com

Variable nicht zugänglich, wenn außerhalb der Funktion initialisiert

Wenn ich Code wie diesen verwende, funktioniert er einwandfrei:

function removeWarning() {
    var systemStatus = document.getElementById("system-status");
    systemStatus.innerHTML = "";
}

function indicateInvalidUsername() {
    var systemStatus = document.getElementById("system-status");
    systemStatus.innerHTML = "Invalid username";
}

Wenn ich dann jedoch das systemStatus als globale Variable verschieben möchte, funktioniert es nicht:

var systemStatus = document.getElementById("system-status");

function removeWarning() {
    systemStatus.innerHTML = "";
}

function indicateInvalidUsername() {
    systemStatus.innerHTML = "Invalid username";
}

Was soll ich hier machen?

40
Nick Heiner

Es hängt wirklich davon ab, wo sich Ihr JavaScript-Code befindet.

Das Problem wird wahrscheinlich dadurch verursacht, dass das DOM beim Laden der Leitung nicht geladen wird

var systemStatus = document.getElementById("system-status");

ausgeführt wird. Sie können versuchen, dies in einem Onload-Ereignis aufzurufen, oder im Idealfall ein Ereignis vom Typ DOM ready aus einem JavaScript-Framework verwenden.

38
MLefrancois

Stellen Sie sicher, dass Sie die Variable auf "Root" -Ebene außerhalb von Codeblöcken deklarieren.

Sie können auch das var insgesamt entfernen, obwohl dies nicht empfohlen wird und ein "strict" auslöst. Warnung.

Gemäß der Dokumentation bei MDC können Sie globale Variablen mit window.variablename.

27
Pekka 웃

Ich vermute, dass die system-status -Element wird deklariert, nachdem die Variablendeklaration ausgeführt wurde. Wenn also die Variable deklariert wird, wird sie tatsächlich auf null gesetzt.

Sie sollten es nur deklarieren und stattdessen seinen Wert von einem onLoad -Handler zuweisen, da Sie dann sicher sind, dass es das betreffende Element ordnungsgemäß initialisiert (geladen) hat.

Sie können auch versuchen, das Skript unten auf der Seite einzufügen (oder zumindest irgendwo nach dem system-status -Element ist deklariert, funktioniert aber nicht immer.

6
lc.

Deklarieren Sie systemStatus in einem äußeren Bereich und weisen Sie es in einem Onload-Handler zu.

systemStatus = null;

function onloadHandler(evt) {
    systemStatus = document.getElementById("....");
}

Wenn Sie den Onload-Handler nicht benötigen, setzen Sie Ihr Skript-Tag unten in Ihren HTML-Code.

6
NG.

Eine globale Variable lässt sich am besten in einer externen JavaScript-Datei ausdrücken:

var system_status;

Stellen Sie sicher, dass dies nirgendwo anders verwendet wurde. Um dann auf die Variable auf Ihrer Seite zuzugreifen, verweisen Sie einfach auf sie als solche. Angenommen, Sie möchten die Ergebnisse in ein Textfeld eingeben.

document.getElementById("textbox1").value = system_status;

Verwenden Sie die dokumentenfertige Funktion von jQuery, um sicherzustellen, dass das Objekt vorhanden ist.

Beispiel:

$(function() {
    $("#textbox1")[0].value = system_status;
});
2
Danny G

Um eine globale Variable zu definieren, die auf einem DOM-Element basiert, müssen einige Dinge überprüft werden. Erstens, wenn der Code in der <head> Abschnitt, dann wird das DOM bei der Ausführung nicht geladen. In diesem Fall muss eine Ereignisbehandlungsroutine eingerichtet werden, um die Variable nach dem Laden des DOM wie folgt festzulegen:

var systemStatus;
window.onload = function(){ systemStatus = document.getElementById("system_status"); };

Befindet sich dieses Skript jedoch während des Ladens des DOM in der Zeile, kann dies durchgeführt werden, solange das betreffende DOM-Element über der Position des Skripts geladen wurde. Dies liegt daran, dass Javascript synchron ausgeführt wird. Dies wäre gültig:

<div id="system_status"></div>
<script type="text/javascript">
 var systemStatus = document.getElementById("system_status");
</script>

Aufgrund des letztgenannten Beispiels speichern die meisten Seiten, auf denen Skripte ausgeführt werden, diese bis zum Ende des Dokuments. Auf diese Weise kann die Seite geladen und anschließend das Javascript ausgeführt werden, was in den meisten Fällen zu einer visuell schnelleren Darstellung des DOM führt.

2
Travis J