Variable non accessible lorsqu'elle est initialisée en dehors de la fonction

Question

Lorsque j'utilise un code comme celui-ci, cela fonctionne bien :

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

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

Cependant, lorsque je veux ensuite déplacer le systemStatus pour être une variable globale, cela ne fonctionne pas :

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

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

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

Qu'est-ce que je suis censé faire ici ?

Answer 1

Cela dépend vraiment de l'endroit où se trouve votre code JavaScript.

Le problème est probablement dû au fait que le DOM n'est pas chargé lorsque la ligne

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

est exécuté. Vous pouvez essayer de l'appeler dans un événement onload, ou idéalement utiliser un événement de type DOM ready d'un framework JavaScript.

Answer 2

Assurez-vous de déclarer la variable au niveau "racine", en dehors de tout bloc de code.

Vous pouvez également supprimer le var tout à fait, bien que ce soit non recommandé et lancera un avertissement "strict".

Selon le documentation au MDC vous pouvez définir des variables globales en utilisant window.variablename .

Answer 3

Je pense que le system-status est déclaré après l'exécution de la déclaration de la variable. Ainsi, au moment où la variable est déclarée, elle est en fait définie comme nulle ?

Vous devez seulement le déclarer, puis lui attribuer une valeur à partir d'un fichier de type onLoad à la place, car vous serez alors sûr qu'il a correctement initialisé (chargé) l'élément en question.

Vous pouvez également essayer de placer le script en bas de la page (ou au moins quelque part après la balise system-status est déclaré) mais il n'est pas garanti que cela fonctionne toujours.

Answer 4

Déclarez systemStatus dans une portée externe et affectez-le dans un gestionnaire onload.

systemStatus = null;

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

Ou si vous ne voulez pas le gestionnaire onload, mettez votre balise script au bas de votre HTML.

Answer 5

Cet article est la réponse à de tels problèmes ! ;) Lisez-le attentivement !