Sujet Précédent Sujet Suivant

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:         
    




    

        
        

                
3 réponses

        

        
    


            

        
        
        

                        Réponse 1 / 3
        


                

                

        

                    

        


     
             

            
    
    

                
            

    


        
        

                

        


     
             

                    jordane45
    
        
    
                    Messages postés
            
                


     
             

            38277
        
            
                            Date d'inscription
            mercredi 22 octobre 2003
                            Statut
            Modérateur
                            Dernière intervention
             8 novembre 2024
            

            


     
             

                    4 696
    
        

                    

                    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);
    
    
  }
}

 

 

                
                

    
        

    
            
        0
                                
                
    

            



    

        
        
    


        

        

                    

    

        

                    

            

        

        
        
        

                        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 çà ?
                
                

    
        

    
            
        0
                                
                
    

            



    

        
        
    


        

        

                    

    

        

                    

                    


            
    
    

        



    

                    

    
        
    
    

                
            

    


    
    

                

        


     
             

                    jordane45
    
        
    
                    Messages postés
            
                


     
             

            38277
        
            
                            Date d'inscription
            mercredi 22 octobre 2003
                            Statut
            Modérateur
                            Dernière intervention
             8 novembre 2024
            

            


     
             

                    4 696
    
        



    

    27 avril 2020 à 15:46

    






    C'est ça
    




    
 
    
        
    0

                    
        
    
    

            



    

        
        
    



    

    
            

        

            

        

        
        
        

                        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
                
                

    
        

    
            
        0
                                
                
    

            



    

        
        
    


        

        

                    

    

        

                    

            

        

    



    
Discussions similaires

                                                    

                
                    Nom de champs du tableau croisé dynamique non valide
                    

                        
    
    

            

    


                        

                                                                                    Kazooie123 -  

                            
                                                                                    SajDri - 
                        

                    

                    

                    

                        6 réponses
                    

                
            

                                                        

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

                        
    
    

            

    


                        

                                                                                                                                                Utilisateur anonyme -  

                            
                                                                                    TomH. - 
                        

                    

                    

                    

                        13 réponses