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 !