Bonjour à toutes et à tous !

Je bug un peu sur un problème sur ma classe Diaporama. En effet, l'ensemble du code marche sauf le défilement automatique (c'est balot pour un diapo). Sur la console il m'affiche "this.activeSlide is not a function" ligne 44. Je pense que le problème se situe au niveau de son "this" puisque lorsque je console.log le this il me renvoi l'objet "windows". Mais je ne sais pas comment résoudre ce petit soucis si une âme charitable voudrait bien m'aiguiller

Je vous montre mon code. Un grand merci à vous !

// Objet Diaporama
class Diaporama {
    
    slides;
    id_last_slide;
    id_slide_current;
   
    constructor(dom_target) {
        this.id_slide_current = 0;
        this.slides = document.getElementsByClassName(dom_target);
        this.id_last_slide = this.slides.length - 1;
        this.next_id = this.id_slide_current;
        this.prev_id = this.id_slide_current;
        this.activeSlide(0);
        this.pauseSlide = document.getElementById('pause');
        this.playSlide = document.getElementById('play');
        this.isPlayingSpace = false;
        this.timer = setInterval(this.next, 5000);
        this.keyControl();
        this.manageEvent();
    };
    
    
    activeSlide(id_slide) { // Operateur ternaire, si la condition est true, l'image est affiché sinon elle est masqué
        for (var i = 0; i < this.slides.length; i++) {
            id_slide == i ? this.slides[i].style.display = "block" : this.slides[i].style.display = "none";
        };
        this.id_slide_current = id_slide;
    };
    
    pause() {
        clearInterval(this.timer);
        this.isPlayingSpace = false;
    }; 
     
    play() {
        this.timer = this.pauseSlide ? this.playSlide = setInterval(this.next, 5000) : this.timer = this.pauseSlide;
        this.isPlayingSpace = true;
    };

    next() { // Image suivante  
        this.id_slide_current == this.id_last_slide ? this.next_id = 0 : this.next_id = this.id_slide_current + 1;
        console.log(this);
        this.activeSlide(this.next_id);
    };

    prev() { //Retour image   
        this.id_slide_current == 0 ? this.prev_id = this.id_last_slide : this.prev_id = this.id_slide_current - 1;
        clearInterval(this.timer);
        this.activeSlide(this.prev_id);
    };
    
    keyControl () { // Gestion des boutons clavier de contrôle
        let my_this = this;
        document.addEventListener("keydown", function(control) {  
            if(control.keyCode === 37) {
                my_this.prev();
                clearInterval(this.timer);
            } else if(control.keyCode === 39) {
                my_this.next();
                clearInterval(this.timer); 
            } else if (control.keyCode === 32) {
                if (my_this.isPlayingSpace == false) {
                    my_this.play();
                }
            } else {
                my_this.pause();
            }
        })  
    };
    
    manageEvent() {
        document.getElementById('prev').addEventListener('click', () => {           
            this.prev();
        });

        document.getElementById('next').addEventListener('click', () => {           
            this.next();
        });
        
        document.getElementById('pause').addEventListener('click', () => {
            this.pause();
        });
        
        document.getElementById('play').addEventListener('click', () => {
            this.play();
        });
    }
}

Salut,

...
this.timer = setInterval(this.next, 5000);
...

Le contexte de setInterval est window : https://developer.mozilla.org/fr/docs/Web/API/WindowTimers/setInterval

Il faut que tu le change :

...
this.timer = setInterval(this.next.bind(this), 5000);
...

Tu risque d'avoir des problèmes de contexte sur cette partie de ton code aussi :

manageEvent() {
    document.getElementById('prev').addEventListener('click', () => {          
        this.prev();
    });

    document.getElementById('next').addEventListener('click', () => {          
        this.next();
    });
        
    document.getElementById('pause').addEventListener('click', () => {
        this.pause();
    });
        
    document.getElementById('play').addEventListener('click', () => {
        this.play();
    });
}

Les 'this' indiqués dans tes fonctions anonymes ne font pas référence à ton instance de Diaporama mais aux éléments qui porte les événements en question. Tu peux régler ça de cette façon :

manageEvent() {
    const _this = this;

    document.getElementById('prev').addEventListener('click', () => {          
        _this.prev();
    });

    document.getElementById('next').addEventListener('click', () => {          
        _this.next();
    });
        
    document.getElementById('pause').addEventListener('click', () => {
        _this.pause();
    });
        
    document.getElementById('play').addEventListener('click', () => {
        _this.play();
    });
}

-
Edité par BrainError 22 janvier 2020 à 15:29:26

Un grand  merci à toi pour l'explication !!!

Tu peux aussi faire ça :

manageEvent() {
    document.getElementById('prev').addEventListener('click', this.prev.bind(this));
 
    document.getElementById('next').addEventListener('click', this.next.bind(this));
         
    document.getElementById('pause').addEventListener('click', this.pause.bind(this));
         
    document.getElementById('play').addEventListener('click', this.play.bind(this));
}

-
Edité par BrainError 22 janvier 2020 à 15:39:18

Merci !!! Tu m'as fait voir plusieurs solution pour un problème donné !

Bonjour Abdenour Belkacemi,

Juste pour optimisation tu n'es pas obligé de refaire un document.getElementById() :

document.getElementById('pause') => this.pauseSlide
document.getElementById('play')=> this.playSlide

donc : 
this.pauseSlide.addEventListener('click', ...);
this.playSlide.addEventListener('click', ....);