Discussion :

[Lunesti]

Bonjour, je viens vous solliciter car j'ai besoin d'aide.

Je dois faire un compte à rebours de 20 minutes en javascript. Je propose ce code qui fonctionne en procédural :

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
 
startTimer = (duration, display) => {
    var timer = duration;
    var minutes;
    var seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60);
        seconds = parseInt(timer % 60, 10);
 
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
 
        display.textContent = minutes + ":" + seconds;
 
        if (--timer < 0) {
            timer = duration;
        }
    }, duration);
}

Et j'appel cette fonction ailleurs, dans une méthode appartenant à ma class Reservation :

Code :

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

1
2
3
4
5
 
Dom.getValider().addEventListener('click', () => {
     let twentyMinutes = 60 * 20, display = document.getElementById('time');
     startTimer(twentyMinutes, display, 1000);
});

En gros , lorsque je clique sur le bouton valider, la fonction startTimer se déclenche, le décompte de 20 minutes est lancé jusque 0.

Mais ça se complique lorsque je transforme ce code en POO :

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
class Chrono {
    constructor(twentyMinutes) {
        this.twentyMinutes = twentyMinutes;
        this.timer = this.duration, 
        this.minutes,
        this.seconds;
        this.timeleft = document.querySelector('#time');
    }
 
    startTimer(duree) {
 
        setInterval(function () {
            this.minutes = parseInt(this.timer / 60);
            this.seconds = parseInt(this.timer % 60, 10);
 
            this.minutes = this.minutes < 10 ? "0" + this.minutes : this.minutes;
            this.seconds = this.seconds < 10 ? "0" + this.seconds : this.seconds;
 
            this.timeleft.textContent = this.minutes + ":" + this.seconds;
 
            if (--this.timer < 0) {
                this.timer = this.duration;
            }
        }, duree);
    }
}

Code :

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

1
2
3
4
5
 
Dom.getValider().addEventListener('click', () => {
     const myChrono = new Chrono(60 * 20);
     myChrono.startTimer(1000);
});

Je pense avoir bien fait, je ne comprends pas. J'obtiens ceci dans la console lorsque je clique sur valider :

(içi, cela correspond à chrono.js:19)

On dirait que le chrono est enclenché (d'ou le numéro qui change , içi avec 8, 9, 10, etc) mais il n'arrive pas à lire ce qu'il y a après le "textContent".
Je ne comprends pas car cela marche en procédural. J'ai juste changé l'affichage du chrono , non plus dans le display mais dans ma balise #time (this.timeleft).

Merci par avance de m'aider car je bute sur ça depuis ce matin...