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> |
