Syntaxe onclick - appeler plusieurs fonctions

Résolu/Fermé

ailec1 Messages postés 7 Date d'inscription lundi 16 février 2015 Statut Membre Dernière intervention 30 mars 2015 - Modifié par ailec1 le 16/02/2015 à 17:49
ailec1 Messages postés 7 Date d'inscription lundi 16 février 2015 Statut Membre Dernière intervention 30 mars 2015 - 17 févr. 2015 à 17:49

Bonjour, je souhaite pouvoir gérer le son d'une page web à l'aide d'un picto -déclenchement au clic (pause ou lecture) + changement d'image

Le son se déclenche lorsque ma page est chargé. Pour arrêter le son je clique sur le picto1. Le picto1 disparait et laisse place au picto2. Et lorsque je clique sur le picto2 le son se relance et il laisse place au picto1.
Le picto1 (france.png) correspond au son sur "play". Le picto2 (carte.png) au son sur "pause".

J'ai réussi à écrire le code qui permet d'arrêter puis de jouer le son. Mais je n'arrive pas à lier cette action au changement d'image. Et les deux fonctions fonctionnent parfaitement indépendamment ! Donc si vous pouviez m'aider à les combiner... car je ne vois pas comment faire

Voici mon code:

<audio id="myAudio" autoplay>
         <source src="mirror.mp3" type='audio/mp3'>
     </audio>

  <img src="france.png" onclick="aud_play_pause();changeImage(this)"></>

<script>
  function aud_play_pause() {
   var myAudio = document.getElementById("myAudio");
    if (myAudio.paused) {
     myAudio.play();
    } 
     else {
           myAudio.pause();
     }
  }
     
         function changeImage() {
   if  (document.getElementById("changer").src == "carte.png")
   {
   document.getElementById("changer").src = "france.png";
   }
   else {
   document.getElementById("changer").src = "carte.png";
   }

  }
    </script>

Merci d'avance pour l'aide !

A voir également:

Syntaxe onclick - appeler plusieurs fonctions
Appeler en privé - Guide
Message ordinateur bloqué appeler numéro - Accueil - Arnaque
Numero drole a appeler - Forum Mobile
Appeler en france du canada - Forum Mobile
Je peux appeler mais pas recevoir d'appel sur mon portable - Forum Réseaux sociaux

2 réponses

Réponse 1 / 2

lolosb Messages postés 292 Date d'inscription samedi 31 octobre 2009 Statut Membre Dernière intervention 20 février 2015 32
16 févr. 2015 à 19:06

Bonjour,

Je n'ai pas fais de test mais il me semble que tu appelles la fonction avec

changeImage(this)

et la fonction n'accepte pas de paramètre, comme elle est définie avec

function changeImage() {}

. Il se peut qu'en changeant cela, ton problème disparaît.
Je crois que ce serait également un bon reflexe d'ajouter toujours le point-virgule après un appel à une fonction comme ici changeImage...

Loïc

Réponse 2 / 2

ailec1 Messages postés 7 Date d'inscription lundi 16 février 2015 Statut Membre Dernière intervention 30 mars 2015
Modifié par ailec1 le 16/02/2015 à 20:37

Merci @lolosb ! Je viens d'appliquer votre suggestion et j'ai remarqué une coquille dans mon code..

<img src="france.png" id="changer" onclick="aud_play_pause();changeImage();">

(il manquait l'id pour que ma fonction soit effective).

Du coup j'ai bien mon changement d'image et mon son qui est mis sur pause, donc ça c'est parfait ! Mais lorsque je reclique sur l'image il ne se passe rien.
D'après ce que je lis il faudrait que j'emploi une boucle while mais je ne sais pas comment la mettre en forme avec mes deux fonctions (tant que je clique mes fonctions s'exécutent).

Une idée de comment je pourrais procéder ?

codeurh24 Messages postés 760 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
17 févr. 2015 à 04:23

le while est très fortement déconseiller dans toute programmation pour les débutant car il peut faire planté le programme entier voir même le système.
Pour du javascript ce n'est pas super grave mais un while laissé traîné quelque part pour rien c'est pénalisant pour le visiteur qui n'a rien demander.

En javascript le click sur un élément html, c'est l'attribut onclick et il s'exécute à chaque clique sur cette élément, donc aucun besoin de while.


	<audio id="monLecteur" autoplay>
		<source src="data/test.mp3" type="audio/mpeg">
	</audio>

	<img id="monImage" src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Farm-Fresh_control_pause_blue.png" />

	
	<script type="text/JavaScript">
		window.onload = function(){
			monImage.onclick = function()
			{
				var monLecteur = window.document.getElementById("monLecteur") ;
				var monImage = window.document.getElementById("monImage") ;
				
				if (monLecteur.paused) {	
					monLecteur.play();	
					monImage.setAttribute("src","https://upload.wikimedia.org/wikipedia/commons/9/9b/Farm-Fresh_control_pause_blue.png"); 
				}else {	
					monLecteur.pause();
					monImage.setAttribute("src","https://upload.wikimedia.org/wikipedia/commons/7/79/Farm-Fresh_control_play.png"); 
				}
			}
		}
	</script>

ailec1 Messages postés 7 Date d'inscription lundi 16 février 2015 Statut Membre Dernière intervention 30 mars 2015 > codeurh24 Messages postés 760 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018
17 févr. 2015 à 17:49

D'accord, merci beaucoup pour cette réponse complète !

Discussions similaires

Je peux appeler mais ne peux pas recevoir d'appel

Comment ecouté la boite vocale de ma copine

Faire un appel simuler sur samsung

je ne peux pas appeler mais je peux recevoir les appels

Appel Téléphonique: Québec vers la France