Bonjour à tous,

Je viens pour essayer d'optimiser une solution, qui en l'état fonctionne à peu près. Je m'explique :

J'ai des phrases encadrées par des balises <span> :

<span>Ceci est une première phrase.</span>
<span>Ceci est une seconde phrase.</span>
<span>ceci est une troisième phrase.</span>

Lors d'un clic sur un span, je veux charger une textarea par le contenu du span sur lequel j'ai cliqué.

Voici mon code qui fonctionne (j'affiche le texte dans un alert) :

<span id='phrase1' onClick="window.alert(document.getElementById('phrase1').innerHTML);">Ceci est une première phrase.</span>
<span id='phrase2' onClick="window.alert(document.getElementById('phrase2').innerHTML);">Ceci est une deuxième phrase.</span>
<span id='phrase3' onClick="window.alert(document.getElementById('phrase3').innerHTML);">Ceci est une troisième phrase.</span>

J'aimerai optimiser le point suivant :
- éviter d'attribuer des id à chaque <span> et implicitement demander d'afficher le texte du span sur lequel j'ai cliqué (j'ai pensé à la solution this, sans trop de succès).

Merci d'avance pour votre aide

Bonjour,

Ce code conviendrait-il ? =)

<!-- this.innerHTML contient le contenu du span -->
<span onclick="maFonction(this.innerHTML);">Texte 1 </span>
<span onclick="maFonction(this.innerHTML);">Texte 2 </span>
<span onclick="maFonction(this.innerHTML);">Texte 3 </span>

<script>
// On affiche le contenu du span cliqué stocké dans la variable-argument "texte".
function maFonction (texte) {
	alert(texte);
}
</script>

Ce code fonctionne très bien, merci !

Maintenant une autre question : si j'ai 10 000+ phrases, je dois répéter à chaque fois <span onclick="maFonction(this.innerHTML);">Ma phrase...</span>
Un peu lourd, non ? Est-ce possible d'appliquer ce onClick à un conteneur parent (un <div> peu exemple) en lui disant d'aller récupérer le texte du <span> sur lequel j'ai cliqué, et non pas tout le contenu du <div>, c'est à dire les 10 000 <span> ?

Merci pour d'éventuelles réponses.

Salut

Oui il est tout a fait possible:

• pour recuperer le div on utilisera un id.
• ensuites en javascript pure il faudrait utiliser childNodes pour recuperer les span.
• On boucle et on verifie que l'element en cours est un span.
• On applique un evenement onclick sur le span.

C'est le chemin a parcourir.
Personelement je n'utilise plus du tout le javascript dans les balises HTML. Je realise tout a partir d'un fichier .js externe.

A bientot
Astro

Merci Astro. Mais la finalité était justement de m'affranchir de l'évènement onClick sur les span, au vu de leur nombre.

Après, je suis peut être trop exigent

Citation : elyppire933

Un peu lourd, non ? Est-ce possible d'appliquer ce onClick à un conteneur parent (un <div> peu exemple) en lui disant d'aller récupérer le texte du <span> sur lequel j'ai cliqué, et non pas tout le contenu du <div>, c'est à dire les 10 000 <span> ?

Oui, ça s'appelle délégation d'événement. Pour détecter le span, il faut passer par la propriété target, qqch comme ça:

var containerEl = document.getElementById('container');

containerEl.onclick = function(e) {      
   var  e = e || window.event,
        target = e.target || e.srcElement;         
        
  if (target.nodeName == "SPAN") {
      console.log(target.innerHTML)
  }
}

Merci loun4st4ck. J'avais entre temps trouvé la solution, très similaire à celle que tu me propose. Si ça peut intéresser quelqu'un, je peux mettre le code.

Merci à tous.

edit : je mettrai bien vos réponses en vert, mais le bouton a disparu ce doit être la fatigue...