Mise à jour dynamique des éléments de portée variable et DOM en JavaScript: en regardant le principe principal du problème '0'

Ce tutoriel explore le concept de base de la portée variable (globale et locale) en JavaScript, et résout le problème que les débutants rencontrent souvent que les valeurs des éléments DOM ne mettent pas à jour avec des changements variables. Nous utiliserons des exemples spécifiques pour clarifier quand et comment mettre à jour correctement les éléments HTML pour refléter le dernier état des variables JavaScript, en s'assurant que l'interface utilisateur est synchronisée avec la logique du programme.

Dans la programmation JavaScript, la compréhension de la portée des variables et comment mettre à jour efficacement les éléments DOM (modèle de document d'objet) est la base de la création de pages Web interactives dynamiques. De nombreux débutants rencontrent souvent des problèmes lorsque vous essayez de modifier le contenu de la page en fonction des actions de l'utilisateur, la valeur d'affichage de l'élément ne met pas à jour ou n'affiche pas la valeur initiale (telle que "0"). Cela découle généralement de malentendus sur la portée des variables et une mauvaise gestion du timing de mise à jour DOM.

Comprendre la portée variable en javascript

La portée des variables dans JavaScript définit où les variables sont accessibles dans le code. Il existe deux types principaux:

1. Portée globale : les variables déclarées en dehors de toute fonction ont une portée globale. Cela signifie qu'ils sont accessibles et modifiés n'importe où dans le script. Dans l'exemple de code que vous fournissez, var x = 0; et var y = 0; sont des variables globales.
2. Étendue / fonction locale Portée : variables déclarées en utilisant le mot clé VAR à l'intérieur d'une fonction ont une portée locale. Ils ne sont accessibles qu'à l'intérieur de la fonction. Ces variables locales ne sont pas accessibles par code en dehors de la fonction.

Exemple d'analyse: dans votre code initial:

 var x = 0; // variable globale var y = 0; // Fonction variable globale alternative1 () {
    y = x 5; // modifie la variable globale y
    document.getElementById ("Demo"). innerHtml = "Vous avez choisi" y;
}
// ... d'autres fonctions alternatives sont similaires

Ici y est une variable globale. Cela signifie que les fonctions alternative1 (), alternative2 () et alternative3 () peuvent toutes l'accès et le modifier. Lorsque la fonction est exécutée, la valeur de Y est en effet mise à jour.

Misonnés communs pour les débutants: si Y est déclaré comme celui-ci à l'intérieur d'une fonction:

 fonction alternative1 () {
    var y = x 5; // y est une variable locale qui n'est valide que dans alternative1 document.getElementById ("démo"). innerhtml = "vous avez choisi" y;
}
// À l'heure actuelle, le document.getElementById ("Demo2"). InnerHtml = y; ne pourra pas accéder à cette variable locale y

Dans ce cas, la variable locale Y déclarée à l'intérieur de la fonction est en effet incapable d'être accessible en dehors de la fonction. C'est une erreur que de nombreux débutants feront, et c'est aussi une incarnation du concept selon lequel "les variables appartiennent à des lunettes de fonction indépendantes". Cependant, dans le code d'origine que vous fournissez, y est global, donc le problème n'est pas dans la portée elle-même.

Problème "temps" pour la mise à jour de l'élément DOM

Bien que votre Y soit une variable globale et que sa valeur change après l'appel de fonction, le contenu de la balise P ID = "Demo2" s'affiche toujours comme 0. Ce n'est pas à cause de la portée de Y, mais parce que votre code JavaScript pour mettre à jour l'élément Demo2 est incorrectement exécuté.

Veuillez consulter cette ligne de code:

 document.getElementById ("Demo2"). InnerHtml = y;

Cette ligne de code est à la fin de la balise , mais en dehors de n'importe quelle fonction . Cela signifie qu'il ne s'exécutera qu'une fois le script JavaScript pour la première fois lorsque la page sera chargée. À ce moment, la valeur initiale de Y est 0. Par conséquent, le contenu de l'élément Demo2 est défini sur 0.

Lorsque l'utilisateur clique sur un bouton, par exemple, l'appel Alternative1 (), la valeur de Y passera à 5, et l'élément de démonstration mettra à jour correctement l'affichage "vous avez choisi 5". Cependant, document.getElementById ("Demo2"). InnerHtml = y; Cette ligne de code ne sera plus exécutée automatiquement. Il n'est exécuté qu'une seule fois lorsque le script est chargé et que le contenu de Demo2 n'est plus mis à jour.

Solution: mettez à jour le DOM immédiatement après les modifications de la variable

Pour résoudre ce problème, vous devez vous assurer que le contenu de l'élément Demo2 est explicitement mis à jour chaque fois que la valeur de Y change. Le moyen le plus direct consiste également à mettre le code qui met à jour Demo2 dans une fonction qui modifiera la valeur y.

Exemple de code corrigé:

 

<adal>
    <title> Variables JavaScript et mises à jour DOM 
 head>
</title>
  <bouton onclick="alternative1 ()"> 5 
  <bouton onclick="alternative2 ()"> 10 
  <bouton onclick="alternative3 ()"> 15 

  <p id="Demo"> </p>
  <p id="Demo2"> </p>

  <cript>
   // Déclarer la variable globale var x = 0;
   var y = 0;

    // Fonction 1: Réglez Y sur x 5
    fonction alternative1 () {
        y = x 5;
        // Mettre à jour Demo Element Document.getElementById ("Demo"). Innerhtml = "vous sélectionnez" y;
        // Clé: Une fois les changements de valeur y, mettez à jour Demo2 Element Document.getElementById ("Demo2"). InnerHTML = Y;
    } 

    // Fonction 2: Réglez Y sur x 10
    fonction alternative2 () {
        y = x 10;
        // Mettre à jour Demo Element Document.getElementById ("Demo"). Innerhtml = "vous sélectionnez" y;
        // Clé: Une fois les changements de valeur y, mettez à jour Demo2 Element Document.getElementById ("Demo2"). InnerHTML = Y;
    }

    // Fonction 3: Réglez Y sur x 15
    fonction alternative3 () {
        y = x 15;
        // Mettre à jour Demo Element Document.getElementById ("Demo"). Innerhtml = "vous sélectionnez" y;
        // Clé: Une fois les changements de valeur y, mettez à jour Demo2 Element Document.getElementById ("Demo2"). InnerHTML = Y;
    }

    // Lorsque la page est chargée, initialisez l'affichage de Demo2 pour vous assurer que le premier chargement est un document correct.getElementById ("Demo2"). InnerHtml = y;
  </cript>

</bouton></bouton></bouton></adal>

Dans le code modifié ci-dessus, document.getElementById ("Demo2"). InnerHtml = y; Cette ligne de code est placée à la fin de chaque fonction alternative. De cette façon, chaque fois que vous cliquez sur le bouton et que la valeur de Y est modifiée, le contenu de l'élément Demo2 sera mis à jour en conséquence, garantissant que l'affichage de la page reste synchronisé avec le dernier état de la variable. Dans le même temps, le code pour initialiser Demo2 est conservé à la fin du script pour s'assurer que Demo2 peut afficher correctement la valeur initiale de Y (0) lorsque la page est chargée pour la première fois.

Notes et meilleures pratiques

1. Identifiez la portée des variables : lors de la déclaration d'une variable, considérez soigneusement la portée dont il a besoin. Si une variable est utilisée à l'intérieur d'une seule fonction, elle doit être déclarée comme une variable locale (en utilisant LET ou const ou const au lieu de VAR est une pratique recommandée dans le JavaScript moderne, qui fournit des lunettes de niveau bloc qui aident à réduire la contamination inattendue de la variable). Essayez d'éviter les abus de variables mondiales pour réduire les conflits de dénomination et améliorer la maintenabilité du code.
2. Mettez à jour le DOM dans le temps : lorsque la valeur d'une variable JavaScript affecte l'affichage de la page, assurez-vous d'effectuer l'opération de mise à jour DOM correspondante immédiatement après la mise à jour de la variable. Les opérations DOM sont généralement consommatrices de performances, mais pour les mises à jour simples, les opérations directes sont possibles. Pour des applications plus complexes, vous pouvez envisager d'utiliser des DOM virtuels (tels que React, Vue et d'autres frameworks) pour optimiser l'efficacité de mise à jour.
3. Moyen recommandé d'écouter l'événement : bien que l'attribut onClick soit pratique dans des exemples simples, dans les projets réels, il est recommandé d'utiliser la méthode AddeveventListener pour lier les événements. Cela permet la séparation de la structure HTML et du comportement JavaScript, ce qui rend le code plus facile à gérer et à maintenir.

    // Exemple: utilisez AddEventListener pour lier le document de l'événement.QuerySelector ('Button: Nth-of-Type (1)'). AddEventListener ('click', alternative1);
   Document.QuerySelector ('Bouton: Nth of-Type (2)'). AddEventListener ('click', alternative2);
   Document.QuerySelector ('Bouton: Nth of-Type (3)'). AddEventListener ('click', alternative3);

4. LICIBILITÉ DE CODE : Gardez la structure du code claire et ajoutez des commentaires de manière appropriée, en particulier lors de la gestion de la portée des variables et de la logique de mise à jour DOM.

Résumer

Pour résoudre le problème que les éléments DOM ne mettent pas à jour avec les variables en JavaScript, le noyau est de comprendre deux points: l'un est la portée des variables pour vous assurer que vous accédez et modifiez les variables correctes; L'autre est le calendrier de la mise à jour DOM , pour s'assurer qu'après que la valeur variable change, l'opération de mise à jour DOM correspondante est exécutée immédiatement, plutôt qu'une seule fois lorsque la page est chargée. En combinant de près la logique de mise à jour DOM avec la logique de modification des variables, vous pouvez créer des pages Web dynamiques qui sont réactives et ont une bonne expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!