Sujet Précédent Sujet Suivant

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

Fermé
lamouchetsetse Messages postés 112 Date d'inscription samedi 2 août 2014 Statut Membre Dernière intervention 21 septembre 2021 - 9 août 2014 à 21:55
lamouchetsetse Messages postés 112 Date d'inscription samedi 2 août 2014 Statut Membre Dernière intervention 21 septembre 2021 - 10 août 2014 à 22:55
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
A voir également:

6 réponses

Réponse 1 / 6
Utilisateur anonyme
10 août 2014 à 00:00
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
Réponse 2 / 6
Utilisateur anonyme
9 août 2014 à 23:15
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'.
0
Utilisateur anonyme
9 août 2014 à 23:15
Pourquoi je m'endors comme ça ? Il n'est pas si tard pourtant. ^^
0
Réponse 3 / 6
lamouchetsetse Messages postés 112 Date d'inscription samedi 2 août 2014 Statut Membre Dernière intervention 21 septembre 2021 2
9 août 2014 à 23:29
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?
0
Réponse 4 / 6
lamouchetsetse Messages postés 112 Date d'inscription samedi 2 août 2014 Statut Membre Dernière intervention 21 septembre 2021 2
Modifié par lamouchetsetse le 10/08/2014 à 01:07
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
Utilisateur anonyme
10 août 2014 à 22:40
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>
0
Réponse 6 / 6
lamouchetsetse Messages postés 112 Date d'inscription samedi 2 août 2014 Statut Membre Dernière intervention 21 septembre 2021 2
10 août 2014 à 22:55
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.
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Balise </br>
erf -
erf -

3 réponses
Faire sauter 2 lignes avec br (CSS)
Utilisateur anonyme -
banjopo -

1 réponse
balise <br> HTML
ben85350 -
Pascal -

6 réponses