Problème d'échec de relocalisation d'éléments JavaScript DOM : piège de variable globale et solution

Cet article se penche sur un problème courant que vous pouvez rencontrer lors du déplacement d'éléments DOM en JavaScript : un élément ne peut pas revenir correctement à son conteneur parent d'origine après avoir été déplacé d'un conteneur parent à un autre. Le point crucial est l’utilisation inappropriée de variables booléennes globales dans la fonction de traitement des événements, ce qui conduit à des résidus d’état et à des erreurs de jugement logique. Le didacticiel réalisera une relocalisation précise et fiable des éléments en déclarant ces variables comme variables locales pour garantir un état indépendant à chaque appel de fonction.

1. Description du problème et définition du scénario

Dans le développement Web, nous devons souvent déplacer dynamiquement des éléments sur la page. Un scénario courant est que l'utilisateur clique sur un élément et que l'élément se déplace de son emplacement d'origine (par exemple, une zone « question ») vers un nouvel emplacement (par exemple, une zone « réponse »). Lorsque l'utilisateur clique à nouveau sur l'élément, nous souhaitons qu'il revienne à sa zone « question » d'origine.

Considérez la structure HTML suivante : il existe plusieurs div avec class="question" sur la page, chacun contenant un élément span. En même temps, il existe plusieurs divs avec class="answer". Notre objectif est de permettre aux éléments span de se déplacer entre les conteneurs de questions et de réponses.

Exemple de structure HTML initiale :

 <corps>
  <div class="conteneur">
    <div class="answer" id="a1"></div>
    <div class="answer" id="a2"></div>
    <div class="answer" id="a3"></div>
    <div class="answer" id="a4"></div>
  </div>

  <div class="line"></div>
  <div class="question" id="q1"><span id="s1">ist</span></div>
  <div class="question" id="q2"><span id="s2">comme</span></div>
  <div class="question" id="q3"><span id="s3">nom</span></div>
  <div class="question" id="q4"><span id="s4">ihr</span></div>

  <button class="btn">soumettre</button>
</corps>

Exemple de style CSS (fournissant une mise en page de base et des effets visuels) :

 * {
  marge : 0 ;
  remplissage : 0 ;
  dimensionnement de la boîte : bordure-boîte ;
}

.réponse, .question {
  largeur : 100 px ;
  hauteur : 50px ;
  bordure : 2px en pointillés #686868 ;
  rayon de bordure : 10 px ;
  affichage : bloc en ligne ;
  débordement : caché ;
  alignement vertical : haut ;
  marge : 10px ;
}

.doubler {
  hauteur : 3px ;
  bordure : 2px solide #686868 ;
  marge supérieure : 30 px ;
  marge inférieure : 30 px ;
}

portée {
  affichage : bloc ;
  position : relative ;
  haut : 50 % ;
  gauche : 50 % ;
  transformer : traduire (-50 %, -50 %);
  alignement du texte : centre ;
}

.btn {
  affichage : bloc ;
  remplissage : 10px 20px ;
  couleur : #686868 ;
  bordure : 2px solide #686868 ;
  taille de police : 1,2 em ;
  hauteur de ligne : 1,7 ;
  transition : 0,3 s ;
  fond : blanc ;
  largeur : 5 % ;
  marge : 40px automatique ;
}

.btn: survoler {
  couleur : blanc ;
  arrière-plan : #686868 ;
  transition : 0,3 s ;
}

Initialement, l’élément span se trouve à l’intérieur de la question div. Lorsque l'on clique sur l'étendue, nous utilisons appendChild() pour la déplacer dans un div de réponse vide. Cependant, lorsque je clique à nouveau sur l'élément span alors qu'il est déjà dans le div de réponse et que j'essaie de le déplacer vers un div de question vide, l'opération échoue sans aucune erreur.

2. Analyse du code JavaScript original et cause première du problème

Afin de réaliser les fonctions ci-dessus, le développeur a écrit le code JavaScript suivant :

 var spn = document.querySelectorAll("span");
var question = document.querySelectorAll(".question");
var réponse = document.querySelectorAll(".answer");
var placéOnAnswer; // Variable globale var placéeOnQuestion ; // Fonction variable globale onspanclick() {
  // Vérifiez si l'élément parent du span actuel est la réponse div
  pour (var je = 0; je 
 Le problème avec ce code est que les deux variables placéOnAnswer et placéOnQuestion sont déclarées comme variables globales . Cela signifie que leurs valeurs resteront les mêmes à chaque appel de onspanclick.
 Supposons la séquence d'opérations suivante :

 L'utilisateur clique sur un span situé dans la question div.
 exécution onspanclick. En parcourant le div de réponse,placeOnAnswer reste indéfini. Parcourez la question div, recherchez l'élément parent correspondant et placementOnQuestion est défini sur true.
 Si la condition (placedOnQuestion == true) est remplie, le span est déplacé avec succès vers un div de réponse vide. À l’heure actuelle,placeOnAnswer n’est toujours pas défini etplaceOnQuestion est vrai.
 L'utilisateur clique désormais sur un span situé dans le div de réponse (peut-être celui qui vient d'être déplacé, ou un autre).
 onspanclick est à nouveau exécuté.

 Parcourez le div de réponse, recherchez l'élément parent correspondant etplaceOnAnswer est défini sur true.
 En parcourant la question div, aucun élément parent correspondant n'est trouvé et placementOnQuestion conserve sa valeur du dernier appel , ce qui est vrai.


 À l’heure actuelle,placeOnAnswer est vrai etplaceOnQuestion est également vrai.
 Si la condition (placedOnAnswer == true) est remplie, le code tente de ramener l'étendue à la question div. Cela peut être un comportement souhaité.
 Cependant, si la logique est plus complexe, ou dans certains cas, placementOnQuestion est incorrectement défini sur true et reste dans d'autres clics non liés, alors if (placedOnQuestion == true) peut être déclenché de manière incorrecte même si l'étendue actuelle est située dans le div de réponse, provoquant une confusion dans la logique. Plus important encore, nous devons effacer ces états au début de chaque événement de clic afin de déterminer avec précision le conteneur parent réel de l'élément actuel.
 Étant donné queplaceOnAnswer etplaceOnQuestion ne sont pas réinitialisés à chaque appel de la fonction, leurs anciennes valeurs interféreront avec le jugement logique actuel, empêchant l'élément de se déplacer comme prévu.
 3. Solution : variables locales et gestion du périmètre
 La clé pour résoudre ce problème est de déclarer les variables placéeOnAnswer etplaceOnQuestion en tant que variables locales dans la fonction onspanclick. De cette manière, à chaque appel de la fonction onspanclick, ces deux variables seront réinitialisées, garantissant ainsi l'indépendance d'état pour chaque traitement d'événement de clic.
 Code JavaScript corrigé :
 var spn = document.querySelectorAll("span");
var question = document.querySelectorAll(".question");
var réponse = document.querySelectorAll(".answer");

fonction onspanclick() {
  // DéclarezplaceOnAnswer etplaceOnQuestion comme variables locales varplaceOnAnswer = false; // Explicitement initialisé à false
  var placéOnQuestion = false; // Explicitement initialisé à false

  // Vérifiez si l'élément parent du span actuel est la réponse div
  pour (var je = 0; je 
 En déclarant PlaceOnAnswer et PlaceOnQuestion dans la fonction onspanclick, ils seront réinitialisés à false à chaque fois que l'événement click se déclenche. De cette manière, chaque exécution déterminera avec précision l'élément parent en fonction du contexte de l'événement de clic en cours, évitant ainsi les erreurs logiques causées par les résidus d'état.
 De plus, par souci de robustesse du code, il est recommandé de simplifier le jugement conditionnel de if (placedOnAnswer == true) à if (placedOnAnswer), car la variable booléenne elle-même a une valeur vraie ou fausse. Dans le même temps, l'utilisation de la structure else if peut garantir que la logique des deux directions de mouvement s'exclut mutuellement et éviter des contrôles inutiles.
 4. Exemple complet et effet courant
 Combiné avec HTML, CSS et code JavaScript modifié, vous obtiendrez une page interactive entièrement fonctionnelle avec relocalisation des éléments DOM.
 HTML (identique à la description du problème) :
 <corps>
  <div class="conteneur">
    <div class="answer" id="a1"></div>
    <div class="answer" id="a2"></div>
    <div class="answer" id="a3"></div>
    <div class="answer" id="a4"></div>
  </div>

  <div class="line"></div>
  <div class="question" id="q1"><span id="s1">ist</span></div>
  <div class="question" id="q2"><span id="s2">comme</span></div>
  <div class="question" id="q3"><span id="s3">nom</span></div>
  <div class="question" id="q4"><span id="s4">ihr</span></div>

  <button class="btn">soumettre</button>
</corps>
 CSS (identique à la description de la question) :
 /* ... (identique au code CSS ci-dessus) ... */
 JavaScript (version modifiée) :
 var spn = document.querySelectorAll("span");
var question = document.querySelectorAll(".question");
var réponse = document.querySelectorAll(".answer");

fonction onspanclick() {
  var placéOnAnswer = false;
  var placéOnQuestion = false;

  pour (var je = 0; je <p> Intégrez le code ci-dessus dans un fichier HTML et ouvrez-le dans le navigateur. Vous constaterez que lorsque vous cliquez sur l'élément span, il se déplace librement et correctement entre les conteneurs de questions et de réponses.</p><h3> 5. Précautions et bonnes pratiques</h3>

• L'importance de la portée des variables : il s'agit d'un concept très basique mais extrêmement important en JavaScript. Comprendre la différence entre les variables globales et les variables locales et leurs cycles de vie est la clé pour éviter de nombreux bugs courants. Dans les fonctions de gestion d'événements ou toute fonction nécessitant un état indépendant, préférez utiliser des variables locales.

• Initialisation explicite : même pour les variables locales, il est recommandé d'effectuer une initialisation explicite au moment de la déclaration (telle que var placeOnAnswer = false;), ce qui peut améliorer la lisibilité du code et éviter un comportement inattendu provoqué par des variables non initialisées.

• Compétences en débogage : lorsque vous rencontrez une situation dans laquelle les opérations DOM ne fonctionnent pas comme prévu mais qu'aucune erreur n'est signalée, l'utilisation de console.log() pour afficher les valeurs​​des variables clés et des chemins d'exécution est une méthode de débogage très efficace. Par exemple, imprimer les valeurs deplaceOnAnswer etplaceOnQuestion au début de chaque fonction onspanclick peut vous aider à localiser rapidement le problème.

• Sélecteurs DOM et délégation d'événements plus modernes : pour des applications plus complexes, vous pouvez envisager d'utiliser document.querySelector() ou document.querySelectorAll() combinés avec une boucle for...of (ou forEach) pour traiter les collections DOM et utiliser la délégation d'événements pour réduire le nombre d'écouteurs d'événements et améliorer les performances. Par exemple:

   document.addEventListener('clic', fonction(événement) {
      if (event.target.tagName === 'SPAN') {
          // this.id devient event.target.id
          // this.parentElement.id devient event.target.parentElement.id
          // ... exécute la logique de onspanclick, mais passe event.target comme contexte}
  });

• Gestion de l'état : pour les interactions d'interface utilisateur plus complexes, s'appuyer uniquement sur la structure DOM pour déterminer l'état des éléments peut devenir difficile à maintenir. Vous pouvez envisager de conserver un modèle de données en JavaScript pour représenter l'état de l'élément (par exemple, un tableau ou un objet qui enregistre à quel div appartient actuellement chaque étendue), puis mettre à jour le DOM en fonction du modèle de données pour obtenir la séparation des données et des vues.

En comprenant et en appliquant ces principes, vous serez en mesure d'écrire plus efficacement du code JavaScript robuste et maintenable qui gère les interactions DOM complexes.

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!