Interaction Classes ES6

**LO88ra** · 14/04/2019, 11h27

Bonjour,

J'ai créer deux classes et je cherchais à les faire interagir entre elles.
Le but c'était que le Visiteur cache en cliquant sur un bouton "confirmer", le bloc Canvas.

Ce code fonctionne :

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
'use strict'
 
class Canvas {
  constructor() {
    this.canvas = document.getElementById('canvas');
  }
 
  cacherCanvas() {
    this.canvas.className = 'hide';
  }
}
 
 
class Visiteur {
  constructor() {
  }
 
 clickConfim(fonction) {
   this.confirm = document.getElementById('confirm');
   this.confirm.addEventListener('click', fonction);
 }
}
 
let x = new Canvas();
let utilisateur = new Visiteur();
 
utilisateur.clickConfim(() => {
  x.cacherCanvas(); });

Ce que je ne comprends pas, c'est qu'en écrivant simplement :

Code :

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

utilisateur.clickConfim(x.cacherCanvas());

la balise canvas est cachée dès le chargement de la page et ne répond donc pas au click.
Est-ce que quelqu'un pourrait m'expliquer pourquoi ?

**psychadelic** · 14/04/2019, 16h31

tu as une drôle de manière d'utiliser la poo , mais bon ,on est juste dans l'expérimentation...

ton code n'a pas de sens :

quand tu écris :

Code :

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

utilisateur.clickConfim(() => { x.cacherCanvas(); });

ok : tu affectes une fonction sur la méthode clickConfim de Visiteur c.a.d : () => { x.cacherCanvas(); } )

mais ensuite en ajoutant ta ligne

Code :

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

utilisateur.clickConfim( x.cacherCanvas() );

tu envois à ta méthode clickConfim un parametre qui n'est pas une fonction mais le résultat de l'appel de la méthode cacherCanvas , ce qui revient à la faire exécuter

et qui réaffecte une valeur nulle sur l'event listener, ce qui le rends inopérant

je t'ai fait une démo pour illustrer avec le debbugger ( touche F12) dont l'utilisation t’aurait permis de découvrir cette erreur par toi même :

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
58
59
60
61
62
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>test </title>
  <style>
    div {
      display: inline-block;
      padding: 20px;
      border: 20px;
      background-color: cadetblue;
      border: 5px solid grey;
    }
    .hide {
      color: cadetblue;
      border-color: crimson;
    }
  </style>
</head>
 
<body>
 
  <div id="canvas">
    canvas / canvas / canvas / canvas / canvas
  </div>
 
  <button id="confirm">cacher Canvas</button>
  <script>
    'use strict'
 
    class Canvas {
      constructor() {
        this.canvas = document.getElementById('canvas');
      }
      cacherCanvas() {
console.log( 'exec cacherCanvas ');
        this.canvas.className = 'hide';
      }
    }
 
    class Visiteur {
      constructor() {}
      
      clickConfim ( fonction ) {
console.log ( 'fonction à affecter sur evt Clic = ', fonction );
        this.confirm = document.getElementById('confirm');
        this.confirm.addEventListener('click', fonction);
      }
    }
 
    let x           = new Canvas();
    let utilisateur = new Visiteur();
 
console.log (' 1er affectation..')
    utilisateur.clickConfim(() => { x.cacherCanvas(); });
 
console.log (' 2em affectation..')
    utilisateur.clickConfim(x.cacherCanvas());
 
  </script>
</body>
</html>

ce qui renvoie dans la console :

- 1er affectation..'
- fonction à affecter sur evt Clic = function () ....
- 2em affectation..'
- exec cacherCanvas
- fonction à affecter sur evt Clic = undefined

Interaction Classes ES6

JavaScript

Discussions similaires

Partager

Partager