Click appelant méthode

**Elztx** · 09/04/2019, 10h53

Bonjour,

J'ai un petit souci avec la gestion de mes événements au clic,
Je tente de relier les boutons pour naviguer dans mon diaporama à mes deux méthodes sans y parvenir. Les événements au clavier fonctionnent très bien mais les boutons ne fonctionnent pas...

Voici mon code JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
const
    tabDiapo = ['velo1.png', 'velo2.png', 'velo3.png', 'velo4.jpg'],
    tabTexte = ['txt1', 'txt2', 'txt3', 'txt4'],
    repertoir_image = 'images/';
 
 
class Diaporama {
    constructor(tableau1, tableau2, repertoire, idImage, idTexte) {
        this.tableauImg = tableau1;
        this.tableauTxt = tableau2;
        this.idImg = idImage;
        this.idTxt = idTexte;
        this.repertoir_image = repertoire;
        this.tbmage = 0;
    }
 
    avancer() {
        this.tbmage++;
        if (this.tbmage > (this.tableauImg.length) - 1) {
            this.tbmage = 0;
        }
        document.getElementById(this.idImg).src = this.repertoir_image + this.tableauImg[this.tbmage];
        document.getElementById(this.idTxt).textContent = tabTexte[this.tbmage];
 
    }
 
    reculer() {
        this.tbmage--;
        if (this.tbmage < 0) {
            this.tbmage = (this.tableauImg.length) - 1
        }
        document.getElementById(this.idImg).src = this.repertoir_image + this.tableauImg[this.tbmage];
        document.getElementById(this.idTxt).textContent = tabTexte[this.tbmage];
    }
 
}
 
monDiaporama= new Diaporama(tabDiapo, tabTexte, repertoir_image, 'diapo', 'legende');
 
monDiaporama.intervalId = setInterval("monDiaporama.avancer()", 5000);
 
 
//Clavier   
document.addEventListener("keydown", function(e){
    if(e.keyCode === 37){
        monDiaporama.reculer();
        clearInterval(monDiaporama.intervalId);
        monDiaporama.intervalId = setInterval("monDiaporama.avancer()", 5000);
    }
    else if(e.keyCode === 39){
        monDiaporama.avancer();
        clearInterval(monDiaporama.intervalId);
        monDiaporama.intervalId = setInterval("monDiaporama.avancer()", 5000);
    }
	});	
// Le bouton droit appelle la méthode "avancer" du diaporama
document.getElementById("fleche_d").addEventListener("click", monDiaporama.avancer()); 
 
// Le bouton gauche appelle la méthode "reculer" du diaporama
document.getElementById("fleche_g").addEventListener("click", monDiaporama.reculer());

La partie HTML concernée :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<section>
        <div id ="diapo_contenair">
 
            <div class="slider" id="main-slider">
                <figure slide="slide">
                        <img id="diapo">
                        <figcaption id="legende"></figcaption>
                </figure>
            </div>
 
            <div class="bouttons">
                 <button id="fleche_g" type="button">
                     <i class="fas fa-chevron-circle-left" id="flechegauche"></i>
                </button>
                <button id="play" type="button">
                    <img src="images/buttonplaypause.png" id="playpause">
                </button>
                <button id="fleche_d" type="button">
                    <i class="fas fa-chevron-circle-right" id="flechedroite"></i>
                </button>
            </div>
 
        </div>
    </section>

(Je peux joindre le CSS si nécessaire.
Je pense que c'est une erreur bête de débutante mais je ne parviens pas à la corriger...)
Aussi, j'aimerai savoir comment faire pour gérer le bouton play/pause. il faut faire un clearInterval s'il est en route et réenclencher le diaporama s'il est en clearInterval?

Merci beaucoup !

**SpaceFrog** · 09/04/2019, 11h11

c'est quoi comme js ?

**Elztx** · 09/04/2019, 11h14

Hum, c'est du JS pur si j'ai bien compris la question

**SpaceFrog** · 09/04/2019, 11h31

[edit]
Ha ok class ...

**SpaceFrog** · 09/04/2019, 11h34

A quel moment les addevents sont ils faits ?
Tes elements du DOM sont-ils instanciés ?

**Elztx** · 09/04/2019, 12h20

Merci beaucoup pour ton intervention, mais c'est finalement résolu, on m'a aidée ailleurs.
Pour info, la solution a été l'ajout d'un function(e){}, ce qui me donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
// Le bouton droit appelle la méthode "avancer" du diaporama
document.getElementById("fleche_d").addEventListener("click", function(e){monDiaporama.avancer()});
 
// Le bouton gauche appelle la méthode "reculer" du diaporama
document.getElementById("fleche_g").addEventListener("click", function(e){monDiaporama.reculer()});

Bonne journée

**Beginner.** · 09/04/2019, 21h33

Envoyé par Elztx

Aussi, j'aimerai savoir comment faire pour gérer le bouton play/pause. il faut faire un clearInterval s'il est en route et réenclencher le diaporama s'il est en clearInterval?

Je n'ai pas bien regardé votre code mais peut-être que ce fil pourrait aider : Mettre un slider en pause au survol de la souris.

**Elztx** · 11/04/2019, 12h20

Hello,

Merci pour les précisions NoSmoking !
Beginner., merci pour le tips. Dans ce cas précis on me demande un bouton cliquable. Je n'ai pas encore ouvert ton lien, je vais regarder si y a une piste dedans, merci

**Beginner.** · 11/04/2019, 14h02

Envoyé par Elztx

Beginner., merci pour le tips. Dans ce cas précis on me demande un bouton cliquable.

Je pense que le principe devrait être le même car c'est juste l’événement qui change dans un cas c'est le survol de la souris et dans l'autre c'est le clique sur un bouton...

Envoyé par Elztx

Je peux joindre le CSS si nécessaire.

Oui pourquoi pas cela permettrait de tester et éventuellement d’ajouter la fonctionnalité "play/pause"...

**Elztx** · 11/04/2019, 14h14

Je t'envoie un Zip de mon dossier, ce sera peut-être plus simple,

Je regarde ce soir ou demain le fil de discussion que tu m'as envoyé, merci !

**NoSmoking** · 11/04/2019, 14h19

Je t'envoie un Zip de mon dossier, ce sera peut-être plus simple,

Demander des réponses de cette manière est contraire aux buts de nos forums qui sont de permettre l'entraide mais aussi le partage des informations.
De plus, vous pouvez importuner les membres auxquels vous vous adressez.

Rappel : IV-K. De l'usage des MP (messages privés)

De plus

Une discussion = une question

Poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue.

Notre but est de maintenir une base de connaissances facile à exploiter par tous les visiteurs, utilisable par tous. Vous avez pu bénéficier de ce forum en posant vos questions, laissez la possibilité aux suivants de bénéficier des réponses en leur offrant un sujet moins dispersé.

**Beginner.** · 11/04/2019, 16h20

Bon ben si un autre fil est ouvert alors on pourra déplacer ma réponse là-bas pour respecter le rappel de NoSmoking...

Envoyé par Elztx

Aussi, j'aimerai savoir comment faire pour gérer le bouton play/pause. il faut faire un clearInterval s'il est en route et réenclencher le diaporama s'il est en clearInterval?

Bon ben après avoir regardé votre code alors oui on peut faire comme vous dites, exemple :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
let isPlay = true;
document.getElementById("play").addEventListener("click", function (e) {
    if (isPlay) {
        clearInterval(monDiaporama.intervalId);
        isPlay = false;
    } else {
        monDiaporama.intervalId = setInterval("monDiaporama.avancer()", 5000);
        isPlay = true;
    }
});

Cela fonctionne bien quand on clique sur "pause" et qu’après on fait défiler les images en cliquant sur les flèches avec la souris mais cela bogue quand on utilise le clavier car dans le gestionnaire "keydown" vous stoppez puis redémarrez le timer (donc le défilement redémarre sans qu'on ait cliqué sur "play" ce qui n'est pas très agréable, non ???)... D'ailleurs je ne vois pas pourquoi faire ça (stoppez puis redémarrez le timer) dans le gestionnaire "keydown" alors que vous ne l'avez pas fait dans les gestionnaires "click" de la souris...

On pourrait éviter de faire ça (stoppez puis redémarrez le timer) pour régler le problème :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
//Clavier   
document.addEventListener("keydown", function (e) {
    if (e.keyCode === 37) {
        monDiaporama.reculer();        
    } else if (e.keyCode === 39) {
        monDiaporama.avancer();        
    }
});

Mais si l'objectif de "stopper puis redémarrez le timer" c'est de l'initialiser pour recommencer le compte depuis 0 alors on peut le faire mais il ne faut le faire que si le défilement n'est pas en pause et il serait plus logique dans ce cas de le faire pour les deux cas : dans le gestionnaire "keydown" et dans les gestionnaires "click" de la souris...

A vous de voire ce n'est pas difficile à ajouter...

**Elztx** · 11/04/2019, 16h58

( NoSmoking dis moi si je dois migrer sur un autre sujet, mais promis j'ai bientôt fini de vous embêter de toute façon !!

)

Merci beaucoup Beginner., en effet ça parait évident pour le play pause une fois fait !! Merci !
Oui j'avais fait un clearInterval pour réinitialiser le décompte du diapo, ne voyant pas comment faire autrement..