Syntaxe onclick - appeler plusieurs fonctions [Résolu/Fermé]

Signaler
Messages postés
7
Date d'inscription
lundi 16 février 2015
Statut
Membre
Dernière intervention
30 mars 2015
-
Messages postés
7
Date d'inscription
lundi 16 février 2015
Statut
Membre
Dernière intervention
30 mars 2015
-
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 !

2 réponses

Messages postés
292
Date d'inscription
samedi 31 octobre 2009
Statut
Membre
Dernière intervention
20 février 2015
31
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
Messages postés
7
Date d'inscription
lundi 16 février 2015
Statut
Membre
Dernière intervention
30 mars 2015

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 ?
Messages postés
760
Date d'inscription
samedi 29 mars 2014
Statut
Membre
Dernière intervention
8 septembre 2018
115
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>
Messages postés
7
Date d'inscription
lundi 16 février 2015
Statut
Membre
Dernière intervention
30 mars 2015
>
Messages postés
760
Date d'inscription
samedi 29 mars 2014
Statut
Membre
Dernière intervention
8 septembre 2018

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