Intégration d'un appel setInterval dans une classe

**alexis_c** · 20/07/2022, 07h46

Bonjour,
j'essai de mettre mon code sous forme de class, mais je rencontre de gros problème avec certain élément.
Voici ce code en exemple:

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
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
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
                .couleur{
                Background=blue;
                }
    </style>
  </head>
  <body>
    <header></header>
    <main>
    <div id=GenBp_1></div>
    <div id=GenBp_2></div>
    </main>
    <footer></footer>
  </body>
<script type="text/javascript">
 
  class GenBp {
                constructor(id = "GenBp_D",etiq = "bp") {
                        this.etiq=etiq;
                        this.idcont=document.getElementById(id);
                        this.idcont.classList.add('GenBp');
                        this.conteneurBp = document.createElement('button');
                        this.idcont.appendChild(this.conteneurBp);
                        this.conteneurBp.classList.add('GenBp_Bp');
                        this.conteneurBp.innerHTML = etiq;
 
                this.conteneurBp.addEventListener("click", () => {this.click()});
                setInterval(() => {this.etat()},1000);
 
                this.conteur=0;
                }
 
        click(){
                this.conteur+=1;
                this.conteneurBp.innerHTML=this.etiq+': '+this.conteur;
        }
        etat(){
                this.conteneurBp.classList.toggle("couleur");
        }
  }
  let GenBp_1 = new GenBp(id='GenBp_1', etiq='bp1');
  let GenBp_2 = new GenBp(id='GenBp_2', etiq='bp2');
</script>
</html>
 
</script>
</html>

~~Dans ce code j'aimerais que la balise du premier bouton passe au click a : "bp1: ". Pouvez vous me dire quel est la bonne syntaxe?~~
Edition du message suite a erreur d'inatention de ma part.
Dans le même ordre d'idée, comment inclure setInterval dans la class pour exécuter la méthode état périodiquement?

En vous remerciant pour le temps que vous voulez bien m'accorder.

**alexis_c** · 20/07/2022, 09h48

J'ai réussi a résoudre mon problème.
je joint le bon code.

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
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
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
                .GenBp {
        position: relative;
        margin: 0 auto;
        z-index: 0;
        border-radius: 0.5em;
}
                .couleur{
                background:blue;
                }
    </style>
  </head>
  <body>
    <header></header>
    <main>
    <div id=GenBp_1></div>
    <div id=GenBp_2></div>
    </main>
    <footer></footer>
  </body>
<script type="text/javascript">
 
  class GenBp {
                constructor(id = "GenBp_D",etiq = "bp") {
                        this.etiq=etiq;
                        this.idcont=document.getElementById(id);
                        this.idcont.classList.add('GenBp');
                        this.conteneurBp = document.createElement('button');
                        this.idcont.appendChild(this.conteneurBp);
                        this.conteneurBp.classList.add('GenBp_Bp');
                        this.conteneurBp.innerHTML = etiq;
 
                this.conteneurBp.addEventListener("click", () => {this.click()});
                setInterval(() => {this.etat()},1000);
 
                this.conteur=0;
                }
 
        click(){
                this.conteur+=1;
                this.conteneurBp.innerHTML=this.etiq+': '+this.conteur;
                this.conteneurBp.classList.toggle("couleur");
        }
        etat(){
                this.conteneurBp.classList.toggle("couleur");
        }
  }
  let GenBp_1 = new GenBp(id='GenBp_1', etiq='bp1');
  let GenBp_2 = new GenBp(id='GenBp_2', etiq='bp2');
//  setInterval(() => {GenBp_1.etat()},1000);
</script>
</html>

Intégration d'un appel setInterval dans une classe

JavaScript

Discussions similaires

Partager

Partager