web-dev-qa-db-fra.com

Variable non accessible lors de l'initialisation de la fonction extérieure

Lorsque j'utilise du code comme celui-ci, cela fonctionne très bien:

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

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

Cependant, quand 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";
}

Que suis-je censé faire ici?

javascriptglobal-variables
40
Nick Heiner

Cela dépend vraiment de l'emplacement de 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 d'appeler cela dans un événement onload, ou idéalement utiliser un événement de type DOM ready à partir d'une infrastructure JavaScript.

38
MLefrancois

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

Vous pouvez également supprimer complètement le var, bien que ce soit non recommandé et jettera un "strict" Attention.

Selon la documentation ( de MDC , vous pouvez définir des variables globales à l'aide de window.variablename.

27
Pekka 웃

Je suppose que l'élément system-status Est déclaré après l'exécution de la déclaration de variable. Ainsi, au moment où la variable est déclarée, elle est en fait définie sur null?

Vous devez le déclarer uniquement, puis attribuer sa valeur à partir d'un gestionnaire onLoad à la place, car vous serez alors certain qu'il a correctement initialisé (chargé) l'élément en question.

Vous pouvez également essayer de mettre le script en bas de la page (ou au moins quelque part après la déclaration de l'élément system-status) Mais il n'est pas garanti de toujours fonctionner.

6
lc.

Déclarez systemStatus dans une étendue externe et affectez-le dans un gestionnaire de charge.

systemStatus = null;

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

Ou si vous ne voulez pas du gestionnaire onload, placez votre balise de script au bas de votre code HTML.

6
NG.

Une variable globale serait mieux exprimée dans un fichier JavaScript externe:

var system_status;

Assurez-vous que cela n'a été utilisé nulle part ailleurs. Ensuite, pour accéder à la variable sur votre page, il suffit de la référencer comme telle. Supposons, par exemple, que vous vouliez remplir les résultats dans une zone de texte,

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

Pour vous assurer que l'objet existe, utilisez la fonctionnalité de document prêt de jQuery.

Exemple:

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

Pour définir une variable globale basée sur un élément DOM, quelques éléments doivent être vérifiés. Tout d'abord, si le code est dans le <head> section, le DOM ne sera pas chargé lors de l'exécution. Dans ce cas, un gestionnaire d'événements doit être placé afin de définir la variable après le chargement du DOM, comme ceci:

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

Cependant, si ce script est en ligne dans la page lors du chargement du DOM, cela peut être fait tant que l'élément DOM en question est chargé au-dessus de l'emplacement du script. En effet, javascript s'exécute de manière synchrone. Ce serait valable:

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

À la suite de ce dernier exemple, la plupart des pages qui exécutent des scripts dans le corps les sauvegardent jusqu'à la fin du document. Cela permettra à la page de se charger, puis au javascript de s'exécuter, ce qui dans la plupart des cas entraîne un rendu visuellement plus rapide du DOM.

2
Travis J