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

**NoSmoking** · 09/04/2019, 13h57

Bonjour,

Pour info, la solution a été l'ajout d'un function(e){}

• pour info il me semble intéressant de rappeler que lorsque tu écris

Code :

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

element.addEventListener("click", monDiaporama.avancer());

tu affectes à l'événement click de l'élément le résultat de la méthode monDiaporama.avancer ceci à cause de la présence des ().

• Le fait de rajouter, ~~inutilement à mon sens~~, function(e) fait que l'on affecte à l'événement click de l'élément une fonction anonyme qui exécutera le code qu'elle contient.

Code :

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

1
2
3
element.addEventListener("click", function(e) {
  monDiaporama.avancer(), false
});

• ~~Dans ton cas~~ tu pourrais ~~simplement~~ affecter la référence à la méthode devant s’exécuter, sans les ()

Code :

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

element.addEventListener("click", monDiaporama.avancer, false);

[EDIT : 09/04/2019 21h00] voir correction post #10 pour plus de précisions.

**Elztx** · 09/04/2019, 16h34

Hello,

En effet, on m'a fait la même réflexion en parallèle, suite à quoi j'ai donc essayé rapidement avec un résultat favorable avant de partir en pause déj ! Je suis donc revenue et j'ai repris mes fichiers de travail où je les avais laissé avant modification, et oh surprise, ça ne fonctionne plus en enlevant la fonction anonyme.. étrange.. j'ai essayé de supprimer les cookies, de changer de navigateur etc. Je dois faire une erreur sans réussir à la voir, je vais me reposer je crois ^^'

Faut que j'arrive à faire le bouton play/pause également qui pour l'instant n'est relié à rien ! Comme tu peux le voir par mes multiples sujets, j'avance doucement aha.

**melka one** · 09/04/2019, 20h49

jour

ces deux lignes

Code :

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

1
2
3
4
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());

elles doivent etre mises a l'interieur de la fonction d'initialisation

**NoSmoking** · 09/04/2019, 20h59

Après avoir regardé plus avant ton code, je dois dire que je n'ai pas pris en compte ton cas précis comme je l'ai mentionné

, en gros je t'ai raconté une co...ie.

• ~~Dans ton cas~~ tu pourrais simplement affecter la référence à la méthode devant s’exécuter, sans les ()

Code :

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

element.addEventListener("click", monDiaporama.avancer, false);

Dans ton cas c'est incorrect compte tenu que tu fais appel à monDiaporama.avancer de ce fait le this dans la méthode avancer se rapportera au bouton cliqué et non à ton diaporama.

Dans ton cas, il te faut donc bien encapsuler l'appel dans une fonction pour « rétablir » le this.

Code :

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

1
2
3
element.addEventListener("click", function(e) {
  monDiaporama.avancer(), false
});

**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é.

**Elztx** · 11/04/2019, 15h26

NoSmoking,

Au temps pour moi, c'est juste que je ne trouvais pas ça très pratique pour regarder que d'avoir des bouts de code dans les messages..

Par contre pour la deuxième partie, c'est bien le titre même de mon sujet... Une méthode appelée au clic. Donc le bouton play/pause est concerné. De même que la question a été évoqué lors de mon premier message.. ma question = les 3 boutons.. Maintenant je peux refaire un sujet concernant uniquement le bouton play/pause si nécessaire.

Bonne journée à toi

**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..