Fonction avec paramètres dans addEventListener ?

**lockmanz** · 24/11/2018, 13h21

Bonjour,

Voici mon problème : ce que je veux faire c'est de stocker les coordonnes à chaque clique de souris dans un tableau.
Pour cela j'ai créée une classe point, le tableau contiendra un ensemble de point.

Par ailleurs, mon principal soucis provient de la fonction du addEventListener j'aimerai mettre en paramétré le tableau mais je n'y arrive pas.

voici le code javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function position_clique_point(ev,tab) {
    var x = ev.clientX - canvas.offsetLeft;
    var y = ev.clientY - canvas.offsetTop;
    return new point2d(x,y);
}
 
window.onload = function () {
    "use strict";
    var tab=[];
    var canvas = document.getElementById('jeu');
    var ctx = canvas.getContext("2d");
    tab.push(canvas.addEventListener('click', position_clique_point, false));
 
};

Merci.

**lockmanz** · 24/11/2018, 14h43

Oui mais non je ne vois pas comment stocker les points dans un tableau même par délégation.

**psychadelic** · 24/11/2018, 14h48

ah ok, j'étais hors sujet.

Code JavaScript :

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
window.onload = function () {
  "use strict";
  var tab=[];
  var canvas = document.getElementById('jeu');
  var ctx = canvas.getContext("2d");
 
  canvas.addEventListener('click', position_clique_point, false);
 
  // ...
 
  function position_clique_point(ev) {
    tab.push({x: (ev.clientX - canvas.offsetLeft) ,y:(ev.clientY - canvas.offsetTop) });
 
    // ne pas négliger le fait que les objet JS ne sont pas directement copiable (il faut utiliser assign sinon)
    // donc autant le créer directement au moment du push dans le tableau
  }
};

**Beginner.** · 24/11/2018, 15h08

Salut,

Si tu tiens à passer le tableau en paramètre tu peux faire ça par 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
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Model</title>
 
    <style>
        canvas {
            background-color: green;
            width: 500px;
            height: 300px;
        }
    </style>
     <script>
            window.onload = function () {
                "use strict";
                var tab = [];
                var canvas = document.getElementById('jeu');
                var ctx = canvas.getContext("2d");
    
                canvas.addEventListener('click', function (ev) {
                    position_clique_point(ev, tab);
                }, false);
            };
    
    
            function position_clique_point(ev, tab) {
    
                var canvas = ev.target;
                var x = ev.clientX - canvas.offsetLeft;
                var y = ev.clientY - canvas.offsetTop;
    
                var point2d = {x,y};    //var point2d = {x,y};    
                tab.push(point2d);    
                console.log(point2d, tab);
            }
        </script>
</head>
 
<body>
 
 
    <canvas id="jeu"></canvas>
 
 
</body>
 
</html>

J'ai modifié une partie de ton code pour que le test soit possible (car par exemple tu ne nous as pas donné la "classe point"...)...

EDIT : Mais j’anticipe un problème, dans le code précédent j'ai laissé tab en variable locale (comme c'est le cas dans le code initial) mais du coup tu n'auras pas accès à ce tableau en dehors de la fonction dans laquelle il est défini alors tu peux le mettre en variable globale et dans ce cas plus besoin de le passer en paramètre, cela donnerait ça :

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>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Model</title>
 
    <style>
        canvas {
            background-color: green;
            width: 500px;
            height: 300px;
        }
    </style>
    <script>
        "use strict";
        var tab = [];
 
        window.onload = function () {
            var canvas = document.getElementById('jeu');
            var ctx = canvas.getContext("2d");
 
            canvas.addEventListener('click', function (ev) {
                position_clique_point(ev);
            }, false);
        };
 
 
        function position_clique_point(ev) {
            var canvas = ev.target;
            var x = ev.clientX - canvas.offsetLeft;
            var y = ev.clientY - canvas.offsetTop;
 
            var point2d = {
                x,
                y
            }; //var point2d = {x,y};    
            tab.push(point2d);
            console.log(point2d, tab);
        }        
    </script>
</head>
 
<body>
 
 
    <canvas id="jeu"></canvas>
 
 
</body>
 
</html>

**Beginner.** · 24/11/2018, 15h24

Envoyé par psychadelic

Code JavaScript :

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
 
 
function position_clique_point(ev) {
  tab.push({x: (ev.clientX - canvas.offsetLeft) ,y:(ev.clientY - canvas.offsetTop) });
 
  // ne pas négliger le fait que les objet JS ne sont pas directement copiable (il faut utiliser assign sinon)
  // donc autant le créer directement au moment du push dans le tableau
}
 
window.onload = function () {
  "use strict";
  var tab=[];
  var canvas = document.getElementById('jeu');
  var ctx = canvas.getContext("2d");
 
  canvas.addEventListener('click', position_clique_point, false);
};

Je n'ai pas testé mais je me demande si cela ne va pas buguer car tu n'as pas passé le tableau tab en paramètre de la fonction position_clique_point(ev)...

Autre solution que le passage en paramètre : mettre tab en globale...

EDIT : Un autre problème c'est que "canvas" n'est pas défini dans la fonction position_clique_point(ev)...

Mais là ce serait dommage de le passer en variable globale si on n'en a pas besoin ailleurs alors perso j'ai ajouté : var canvas = ev.target; dans la fonction...

**CosmoKnacki** · 24/11/2018, 17h15

Envoyé par Beginner.

Je n'ai pas testé mais je me demande si cela ne va pas buguer car tu n'as pas passé le tableau tab en paramètre de la fonction position_clique_point(ev)
...
EDIT : Un autre problème c'est que "canvas" n'est pas défini dans la fonction position_clique_point(ev)...

Non ça ne buguera pas car lorsque position_clique_point est exécutée, comme tab ou canvas ne sont pas déclarées dans la fonction, Javascript cherchera si ces variables existent dans le bloc où est appelée la fonction (puis dans le bloc parent, puis dans le bloc parent du bloc parent..., jusqu'à ce qu'il mette la main dessus).

Un peu de lecture sur le sujet.

**psychadelic** · 24/11/2018, 17h29

Envoyé par Beginner.

Je n'ai pas testé mais je me demande si cela ne va pas buguer car tu n'as pas passé le tableau tab en paramètre de la fonction position_clique_point(ev)...

oui tu as raison, et c'est d'ailleurs la raison pour laquelle j'ai corrigé mon code

Dernière modification par psychadelic ; Aujourd'hui à 15h27. Motif: petite coquille sur la portée de variable

**Beginner.** · 24/11/2018, 20h15

@psychadelic : +1 ! Oui j'ai vu entre temps que tu avais modifié ton code...

Envoyé par CosmoKnacki

Non ça ne buguera pas car lorsque position_clique_point est exécutée, comme tab ou canvas ne sont pas déclarées dans la fonction, Javascript cherchera si ces variables existent dans le bloc où est appelée la fonction (puis dans le bloc parent, puis dans le bloc parent du bloc parent..., jusqu'à ce qu'il mette la main dessus).

Un peu de lecture sur le sujet.

+1 ! Oui merci pour le lien et l'explication, cela me fera un rappel...

Ceci dit en fait ce que je disais concerne le premier code de psychadelic (et c'est celui-là que j'ai cité dans mon message) et toi ton explication concerne la version corrigée de son code (enfin je suppose car sinon ça ne colle pas)... Le premier bogue pour les raisons que j'ai mentionnées mais pas la version corrigée...

PS : Ceci dit si on veut avoir accès au tableau tab ailleurs dans le code il faudra faire quelque chose (perso je l'ai mis en globale, le plus simple).

**lockmanz** · 25/11/2018, 10h29

Je vous remercie pour vos réponses vous êtes géniales !!!
__
/ |
___ / _|_______
|___
|____
|______/________

Finalement j'ai opté pour cette solution que voici :

Au lancement du programme :

Code :

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

1
2
3
4
5
6
7
8
window.onload = function () {
  "use strict";
  var liste_des_points=[];
  var canvas = document.getElementById('jeu');
  var ctx = canvas.getContext("2d");
  canvas.addEventListener('click', function (ev) { position_clique_point(ev, liste_des_points); }, false);    
 
};

Ma fonction position clique :

Code :

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

1
2
3
4
5
6
7
function position_clique_point(ev, tab) {
    var x1 = ev.clientX - canvas.offsetLeft;
    var y1 = ev.clientY - canvas.offsetTop;
    tab.push(x1);
    tab.push(y1);
    console.log(tab);
}

Qu'en pensez-vous ? selon vous serait-il meilleur de stoker la classe point 2d dans le tableau (j'ai utilisé cette solution puisque je n'arrivais à stocker mon objet point2d que voici :

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
 
function point2d(x,y) {
  Object.defineProperty(this,'x',{
    value:x,
    writable:false,
    enumerable:true,
    configurable:false
  });
  Object.defineProperty(this,'y',{
    value:y,
    writable:false,
    enumerable:true,
    configurable:false
  });
}

)

**Beginner.** · 25/11/2018, 14h14

Salut,

Ben pourquoi tu te compliques les choses avec un constructeur ? On t'a proposé une solution toute simple, moi j'ai écrit ça :

Code :

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

1
2
var point2d = {x,y};    
tab.push(point2d);

Et psychadelic a proposé ceci : tab.push({x: (ev.clientX - canvas.offsetLeft) ,y:(ev.clientY - canvas.offsetTop) });...

C'est beaucoup plus simple et au final l’accès aux points se fait de la même manière, exemple :

tab[0] --> premier point
tab[0].x --> coordonnée "x" du premier point.
tab[0].y --> coordonnée "y" du premier point.

**lockmanz** · 25/11/2018, 14h18

En fait, c'est parce que je suis obligé d'utiliser cette classe :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function point2d(x,y) {
  Object.defineProperty(this,'x',{
    value:x,
    writable:false,
    enumerable:true,
    configurable:false
  });
  Object.defineProperty(this,'y',{
    value:y,
    writable:false,
    enumerable:true,
    configurable:false
  });
}

(Je te remercie pour ta réponse)

**psychadelic** · 25/11/2018, 16h06

Envoyé par lockmanz

En fait, c'est parce que je suis obligé d'utiliser cette classe :

et si tu posais correctement tes questions au lieu de nous mener en bateau?

On devine comment que tu es obligé de passer par cette classe ???

Code Javascript :

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
 
  function point2d(x,y) {
    Object.defineProperty(this,'x',{ value:x, writable:false, enumerable:true, configurable:false });
    Object.defineProperty(this,'y',{ value:y, writable:false, enumerable:true, configurable:false });
  }
 
  var toto = new point2d(5,8);
 
  const PropDescp = Object.getOwnPropertyDescriptors(toto);
 
  console.log(PropDescp.x.writable);  // false
  console.log(PropDescp.x.enumerable); // true
  console.log(PropDescp.x.configurable); // false
 
  var tab = [];
 
  tab.push( new point2d(15,27) );
  tab.push( new point2d(6,3) );
 
   console.log(tab)

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
window.onload = function () {
  "use strict";
 
  function point2d(x,y) {
    Object.defineProperty(this,'x',{ value:x, writable:false, enumerable:true, configurable:false });
    Object.defineProperty(this,'y',{ value:y, writable:false, enumerable:true, configurable:false });
  }
  var tab=[];
  var canvas = document.getElementById('jeu');
  var ctx = canvas.getContext("2d");
 
  canvas.addEventListener('click', position_clique_point, false);
 
  // ...
 
  function position_clique_point(ev) {
    tab.push( new point2d( ev.clientX-canvas.offsetLeft , ev.clientY-canvas.offsetTop ) );
  }
};

**lockmanz** · 25/11/2018, 16h58

Effectivement c'est vrai que je tourne souvent en rond quand je pose des questions

....Par ailleurs je te remercie pour ta remarque et ta réponse.

Par contre maintenant que j'ai mon tableau il m'est impossible d’accéder à la valeur x lorsque que je fait :

Code :

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

console.log(tab[0].x)

rien n'est affiché alors que normalement l'abscisse devrait être affiché.

**Beginner.** · 25/11/2018, 17h14

Envoyé par lockmanz

Par contre maintenant que j'ai mon tableau il m'est impossible d’accéder à la valeur x lorsque que je fait :

Code :

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

console.log(tab[0].x)

rien n'est affiché alors que normalement l'abscisse devrait être affiché.

Lol... Cela fait un moment que j'avais anticipé cela :

Envoyé par Beginner.

EDIT : Mais j’anticipe un problème, dans le code précédent j'ai laissé tab en variable locale (comme c'est le cas dans le code initial) mais du coup tu n'auras pas accès à ce tableau en dehors de la fonction dans laquelle il est défini alors tu peux le mettre en variable globale et dans ce cas plus besoin de le passer en paramètre, cela donnerait ça :

**psychadelic** · 25/11/2018, 17h42

Envoyé par lockmanz

Par contre maintenant que j'ai mon tableau il m'est impossible d’accéder à la valeur x lorsque que je fait :

Code :

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

console.log(tab[0].x)

rien n'est affiché alors que normalement l'abscisse devrait être affiché.

Bon, au moins j'imagine que tu utilise le debugger de ton de ton navigateur ( touche f12 ) et regardé le message indiqué dans la console

mais quand tu écris que rien n'est affiché, la, je ne te crois pas une seconde. parce qu'il y a forcément un message avec, soit la valeur soit un message d'erreur.

Soit ta table est vide et ce message est: TypeError: tab[0] is undefined => que donne ( console.log(tab.length) ? )

Soit tu a un problème de portée (
comme te l'indique Beginner, pourtant tu semblais familier de la question :

Un peu de lecture sur le sujet.

et ce message est ReferenceError: tab is not defined.

... ou un autre message ??

Fonction avec paramètres dans addEventListener ?

JavaScript

Discussions similaires

Partager

Partager