Comment acceder à une balise html généré par un événement

[Fermé]
Signaler
Messages postés
112
Date d'inscription
samedi 2 août 2014
Statut
Membre
Dernière intervention
21 septembre 2021
-
Messages postés
112
Date d'inscription
samedi 2 août 2014
Statut
Membre
Dernière intervention
21 septembre 2021
-
Bonjour, je cherche a accéder à une balise html qui sera générer par un click.
Le probleme c'est que cette balise (span) n'existe pas temps que le click n'a pas eu lieu.
Voici le code html:
<p id="p">a</p>


et le JS:
    var p = document.getElementById('p');
    
    var pp = function(e)
    {
        p.innerHTML = '<span id="span">Salut</span>';       
    }
    
    p.addEventListener('click', pp, false);
    
    
    
     var pspan = function(e)
     {
         span.innerHTML = 'a';
     }
     
     var span = document.getElementById('span'); 
     span.addEventListener('click', pspan, false);


Ce code genere une l'erreur suivante:

TypeError: span is null
span.addEventListener('click', pspan, false);



Ce qui est normal car le span en question n'a pas encore été généré.
donc comment faire pour accéder à ce span lorsque le click aura lieu?

Merci beaucoup pour votre aide

6 réponses


Tu peux retirer l'eventlistener que tu avais mis initialement sur p, tu es sûr qu'il ne viendra plus rétablir le Salut :

Après le
span.addEventListener('click', pspan, false);
ajoute
p.removeEventListener('click', pp, false);
.
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42674 internautes nous ont dit merci ce mois-ci


Bonsoir

Il suffit de ne pas faire de référence à 'span' avant de l'avoir créé. Voici la version modifiée :
<script type="text/javascript">
var p = document.getElementById('p');

    var pp = function(e)
    {
       p.innerHTML = '<span id="span">Salut</span>';
       var span = document.getElementById('span');
       span.addEventListener('click', pspan, false);
       alert('pp');
    }

    p.addEventListener('click', pp, false);

     var pspan = function(e)
     {
         this.innerHTML = 'a';
         alert('pspan');
     }

</script>


-J'ai mis le addEventListener de span APRES la création de span.
-Dans la fonction pspan, j'utilise this.innerHTML plutôt que span.innerHTML, ce qui évite de rendre la variable span globale.
-J'ai ajouté deux petits 'alert' instructifs. En effet, si la fonction pp se déroule bien lorsqu'on clique sur 'a' la première fois, on voit ainsi que quand on clique sur 'Salut', les DEUX fonctions pspan puis pp sont déclenchées, ce qui fait qu'on affiche encore 'Salut' : l'affichage de 'a' est transitoire et n'a donc même pas lieu sans le 'alert'.
Utilisateur anonyme
Pourquoi je m'endors comme ça ? Il n'est pas si tard pourtant. ^^
Messages postés
112
Date d'inscription
samedi 2 août 2014
Statut
Membre
Dernière intervention
21 septembre 2021
2
Ok d'accord, j'avais déjà testé ce code, mais sans les alert du coup je pensais qu'il ne fonctionnais pas.
Ceci dit, il y a t il un moyen de faire en sorte que la valeur du span reste sur a?
Messages postés
112
Date d'inscription
samedi 2 août 2014
Statut
Membre
Dernière intervention
21 septembre 2021
2
Ok super merci beaucoup le père ça fonctionne, cependant, j'aimerais que si je reclick sur "a", "salut" réapparaisse à nouveau etc...
J'ai donc pensé à ce code:

var p = document.getElementById('p'),
    i = 0;

    var pspan = function(e)
    {
        this.innerHTML = 'a';
        alert('pspan '+i);
        i = 0;
    }
    
    var pp = function(e)
    {
       i = 1;
       p.innerHTML = '<span id="span">Salut</span>';
       alert('pp '+i);
    }

    if(i === 0)
    {
        p.addEventListener('click', pp, false);
    }
    else if(i === 1)
    {
     var span = document.getElementById('span');
     span.addEventListener('click', pspan, false);
        alert('zzzz '+i);
    }


Cependant, même si la valeur de i se retrouve bien à 1 dans mon alert(), c'est toujours la 1er condition qui est éxécutée lors du click

même si la valeur de i se retrouve bien à 1 dans mon alert(), c'est toujours la 1er condition qui est éxécutée lors du click
Non, absolument pas.
La première condition du if n'est exécutée qu'une seule fois : quand la page est chargée. Ensuite, ce n'est plus que la fonction pp qui est exécutée, et cette fonction seulement.

Mais si c'est juste pour alterner entre deux textes, tu te compliques terriblement la vie. Il suffit de vérifier quel est le texte affiché, et de forcer l'autre. Pas besoin de deux gestionnaires d'événements différents, le même suffit :
<body>
<p id="p" onclick="pp();">a</p>
</body>
<script type="text/javascript">

    function pp(e)
    {
      if (p.innerHTML =='a')
        p.innerHTML = '<span id="span">Salut</span>';
      else
        p.innerHTML= 'a';
    }

</script>
Messages postés
112
Date d'inscription
samedi 2 août 2014
Statut
Membre
Dernière intervention
21 septembre 2021
2
oui, vu comme ça c'est simple, mais le code que j'ai présente n'est qu'un exemple, mon vrai code est bien plus compliqué.
Un meilleur exemple consisterai à présenter le chose comme suit:

<p id="p">a</p>


   var p = document.getElementById('p'),
    i = 0;
 
    var pspan = function(e)
    {
        this.innerHTML = 'a';
        alert('pspan '+i);
        i = 0;
    }
     
    var pp = function(e)
    {
       p.innerHTML = '<span id="span">Salut </span><span> bb</span';
    }


j'aimerais que si je click sur "a", "salut bb" apparaisse et que si je click ensuite sur "salut", j'obtienne "a bb" et ainsi de suite, "salut bb", "a bb"...

Mais quelqu'un m'a déjà donné une solution sur un autre forum.
La voici:

    var p = document.getElementById('p');
    p.addEventListener('click', function pclick(){
        p.removeEventListener('click', pclick, false);
        p.innerHTML = '<span id="span">Salut </span><span> bb</span>';
        var i = 1;
        document.getElementById('span').addEventListener('click', function spanclick(){
            this.innerHTML = (++i%2) ? 'Salut ' : 'a ';
            alert('pspan ' + i);
        }, false);
        alert('pp');
    }, false);


En tout cas, merci beaucoup pour ton aide.
Bonne soirée.
A bientôt.