Création dynamique d'eventListeners

Résolu/Fermé

filtep - 27 avril 2020 à 15:22
filtep - 27 avril 2020 à 16:43

Bonjour,

je cherche à créer dynamiquement des eventListeners sur les éléments du DOM (ici des boutons) eux même créés dynamiquement.

<!DOCTYPE html>

<html>

    <head>                
    </head>
    
    <body onload="charge()";>    
    </body>
    
    <script type="text/javascript">
    
        function charge(){
        
            for(x=0; x<5; x++){
              var nouv_text="<button id='btn_" + x + "'>Bouton " + x + "</button><br>";
             document.body.innerHTML=document.body.innerHTML + nouv_text
             document.getElementById('btn_'+x).addEventListener('click', function(){alert(this.id);});
            }
        }
    
    </script>
    
</html>

Seul le dernier bouton 'garde' l'eventListener et je ne comprends pas pourquoi ? Certainement une histoire de variables mais... un peu d'aide ma serait grandement utile.

Merci d'avance

Philippe

A voir également:

Création dynamique d'eventListeners
Tableau croisé dynamique - Guide
Creation compte gmail - Guide
Création organigramme - Guide
Media creation tool - Télécharger - Systèmes d'exploitation
Création compte google - Guide

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
27 avril 2020 à 15:34

Bonjour,

Le problème c'est que tu réécris le contenu ( les boutons ) à chaque itération.
Sauf que l'addevent n'existe plus au moment ou tu recréés les boutons.

Pour le faire proprement, voici :

function charge(){

  for(x=0; x<5; x++){
    var btn = document.createElement("BUTTON");
    btn.id = 'btn_'+x;
    btn.innerHTML =  'btn_'+x;
    document.body.appendChild(btn);

    btn.addEventListener('click', function(){alert(this.id);});
    
    var br = document.createElement("BR");
    document.body.appendChild(br);
    
    
  }
}

Réponse 2 / 3

filtep
27 avril 2020 à 15:45

Merci beaucoup Jordane45,

ta solution fonctionne parfaitement mais je ne comprends pas ce qui ne va pas dans mon code initial. C'est le:
" document.body.innerHTML=document.body.innerHTML + nouv_text "
qui pose problème parce que ça recrée tous les boutons sans leur evenListener, c'est çà ?

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
27 avril 2020 à 15:46

C'est ça

Réponse 3 / 3

filtep
27 avril 2020 à 16:43

Merci beaucoup,
ça faisait 24 h que je ne m'en sortait pas !

Bonne fin de journée
Philippe

Discussions similaires

Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport

Nom de champs du tableau croisé dynamique non valide

Discussions similaires

Newsletters