Syntaxe onclick - appeler plusieurs fonctions
Résolu
ailec1
Messages postés
8
Statut
Membre
-
ailec1 Messages postés 8 Statut Membre -
ailec1 Messages postés 8 Statut Membre -
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:
Merci d'avance pour l'aide !
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
- Je peux appeler mais pas recevoir d'appel sur mon portable ✓ - Forum telephonie fixe
- Appeler en france du canada - Forum Mobile
- Appeler un portable canadien en France, indicatif ? ✓ - Forum Mobile
- Ecouter le repondeur de quelqu'un sans l'appeler - Forum Mobile
2 réponses
Bonjour,
Je n'ai pas fais de test mais il me semble que tu appelles la fonction avec
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
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
Merci @lolosb ! Je viens d'appliquer votre suggestion et j'ai remarqué une coquille dans mon code..
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 ?
<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 ?
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.
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>