Javascript toggle problème

Bonjour à tous,

J'ai une liste d'éléments avec un bouton "play" dans chaque élément.
Je souhaite que l'image de ce bouton change lorsque l'on clique dessus.
Voici mon code :

<script type="text/javascript">

   var tggle='on';
   var obj;

window.onload=function() {
   obj=document.getElementById('playpause')
document.getElementById('<?php echo $row_Cours['id']; ?>').onclick=function() {
   toggle();
   return false;
  }
 }
function toggle(){
if(tggle=='on'){
   obj.src="images/arreterlecoute.png";
   tggle='off';
 }
else {
   obj.src="images/ecouterlemorceau.png";
   tggle='on';
  }
 }
</script>

<a href="<?php echo $row_Cours['id']; ?>.mp3" id="<?php echo $row_Cours['id']; ?>" class="first">
                    
                      <img src="images/ecouterlemorceau.png" id="playpause" />
                      
                    </a> 

Ca fonctionne sur le premier élément de la liste mais pas sur les autres...
Merci de votre aide.

Bonjour,

Il ne peut y avoir qu'un ID par page. Ensuite ton gestionnaire d'evenement ne boucle pas sur tous tes liens, mais uniquement sur le premier lien.

<?php echo $row_Cours['id']; ?>

Et évidemment

<a href="<?php echo $row_Cours['id']; ?>.mp3" id="<?php echo $row_Cours['id']; ?>" class="first">

par

<a href="<?php echo $row_Cours['id']; ?>.mp3" id="idunique" class="first">

Je vais te l’écrire en langage naturel.

Je récupère la liste des éléments sur lesquels je veux faire quelques chose (un tableau)
_Pour Chacun de ces éléments je mets en place un gestionnaire d’évènement ( dans une boucle)
_Le gestionnaire d’évènement intercepte l’évènement et le traite. (via une fonction)

Une fonction prend en paramètres un objet (l'élément) et en fonction de (if else) effectue l'action.

obj=document.getElementById('playpause')

Ne récupérera jamais qu'un seul élément.

document.getElementById('<?php echo $row_Cours['id']; ?>').onclick=function() {};

N’attribuera le gestionnaire onclick qu'au lien d'ID $row_Cours['id'] et à lui seul.

Ta fonction toggle ne fonctionnera pas si aucun paramètres n'est passé (l'élément à tester).

Ta variable globale tggle changera d'état à chaque fois que toggle sera appelé, quelques soit l'élément ciblé et donc ne marchera q'une fois sur 2 au maximum.

Il te faut soit ciblé une classe, soit ciblé l'image et sa valeur pour src directement pour savoir si c'est ecouterlemorceau.png ou arreterlemorceau.png