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

lamouchetsetse Messages postés 112 Date d'inscription Statut Membre Dernière intervention -
lamouchetsetse Messages postés 112 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

A voir également:

Comment acceder à une balise html généré par un événement
Comment accéder à wetransfer gratuitement ? - Guide
Editeur html - Télécharger - HTML
Comment acceder au presse papier - Guide
Comment accéder au trousseau icloud - Guide
Accéder à appdata - Guide

6 réponses

Réponse 1 / 6

Utilisateur anonyme

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

Réponse 2 / 6

Utilisateur anonyme

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. ^^

Réponse 3 / 6

lamouchetsetse Messages postés 112 Date d'inscription Statut Membre Dernière intervention 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?

Réponse 4 / 6

lamouchetsetse Messages postés 112 Date d'inscription Statut Membre Dernière intervention 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

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

Posez votre question

Réponse 5 / 6

Utilisateur anonyme

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>

Réponse 6 / 6

lamouchetsetse Messages postés 112 Date d'inscription Statut Membre Dernière intervention 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.

Discussions similaires

Disparition de l'onglet "événements" sur les Groupes FB

Votre réponse

Discussions similaires