1 pièce(s) jointe(s)
Chrono JS: passer du procédural en POO
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:
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:
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:
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:
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 :
Pièce jointe 573663
(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...
