[CoffeeScript] Passage paramètre dans une fonction onclick

Bonjour a tous,

J'ai un petit problème de coffeescript. En effet, j’essaie d'ajouter une fonction avec un paramètre sur un event onclick, mais cela ne fonctionne pas comme attendu.

Pour faire simple voici mon code:

Code:

---

1 2 3

index = 0 row = document.getElementById("deleteButton_#{index}"); row.onclick = (index) -> deleteRow(index)

---

Donc dans mon exemple, je m'attend avoir dans la fonction deleteRow, le param index qui vaut 0. Mais a l’exécution, je me retrouve avec un mouse event....

Avez une idée pour résoudre mon problème ?


Je vous remercie par avance.

la syntaxe en javascript est

Code:

---

1 2 3

elem.onclick = function (param) { //le paramètre param reçoit pour valeur à l'appel l'événement click. }

---

ce que tu veux faire ce n'est pas capter un paramètre mais utiliser un variable globale

Code:

---

1 2 3 4 5 6

index = 0; elem.onclick = function (param) { //le paramètre param reçoit pour valeur à l'appel l'événement click. //ici index est une référence à la variable globale qui vaut 0 avant tout appel. index++; }

---

si tu nomme une variable locale ou un paramètre avec le même nom qu'une variable globale
cette variable globale n'est plus directement accéssible

Code:

---

1 2 3 4 5 6

index = 0; elem.onclick = function (index) { //le paramètre index reçoit pour valeur à l'appel l'événement click. //ici index est une référence à l'événement click. index++; //ici ça plante index n'est pas un number et ne peut être converti en number. }

---

je ne maitrise pas la syntaxe coffeescript

Code:

---

row.onclick = (param) -> deleteRow(index)

---

A+JYT

Ah oui, évidement, il y avait collision ;).
Merci.

Mais cela ne fonctionne toujours pas. En effet, mon code est dans une boucle et il prend maintenant la dernière valeur possible.
Comme dans le cas d'un problème de closure. (Je pensai que le coffee résolvait se problème)

Code:

---

1 2 3 4

for _, index in listOfLinks row = document.getElementById("deleteButton_#{index}"); row.onclick = () -> deleteRow(index)

---

cs ne résolve pas ce type de problème à ce que je sache
ES5 est ton ami

Code:

---

1 2 3

listOfLinks.forEach(index)-> row = document.getElementById("deleteButton_#{index}"); row.onclick = () -> deleteRow(index)

---

Code:

---

1 2 3 4 5 6 7 8

for (var index = 0; index < max; index++) { var item = index; //on créé dans le contexte une variable qui sera utilisé par la méthode onclick row = document.getElementById('deleteButton_#'+item+''); row.onclick = function (event) { //ici on utilise la référence à la variable créée dans la boucle. On n'utilise pas la valeur mais la variable elle même. deleteRow(item); } }

---

mais tout ça n'est pas propre du tout
il y a beaucoup mieux
suposons que tu définisse un objet simple avec une méthode

Code:

---

1 2 3 4 5 6

obj = { item: 12, remove: function() { deleteRow(this.item); } }

---

obj a un attribu item qui vaut 12 et une méthode qui appelle deleteRow avec cette valeur d'item.
c'est quelque chose de très basique en poo.
On peut très bien construire cet objet sans attributs ni méthodes et l'enrichier ensuite.

Code:

---

1 2 3 4 5

obj = {}; obj.item = 12; obj.remove = function() { deleteRow(this.item); }

---

cela est équivalent. la diférence c'est que l'objet est d'abor construit puis enrichi d'un attribut et d'une méthode.

Les éléments du DOM sont eux aussi de simples objet. tu peux donc très bien faire

Code:

---

1 2 3 4 5

row = document.getElementById('deleteButton_#'+item+''); row.item = 12; row.remove = function() { deleteRow(this.item); }

---

De la même façon. cela fonctionne très bien.
Mais HTML a prévu pour éviter d'évetuels confilcs de nom d'attribut de nommer les attributs propre à l'utilisateur data-*
ainsi il est préférable d'écrire

Code:

---

1 2 3 4 5

row = document.getElementById('deleteButton_#'+item+''); row['data-item'] = 12; row.remove = function() { deleteRow(this['data-item']); }

---

Mais comme le W3C a bien fait les chose mieux vaut utiliser les setters.

Code:

---

1 2 3 4 5

row = document.getElementById('deleteButton_#'+item+''); row.setAttribute('data-item', 12); row.remove = function() { deleteRow(this.getAttribute('data-item')); }

---

ainsi pour ton problème il suffit pour chaque index d'ajouter data-item et la méthode onclic

Code:

---

1 2 3 4 5 6 7 8

for (var index = 0; index < max; index++) { row = document.getElementById('deleteButton_#'+item+''); row.setAttribute('data-item', index); //on associe la valeur d'index à cet élément row.onclick = function (event) { //ici on n'uutilise la référence aucune variables deleteRow(this.getAttribute('data-item'));//on supprime l'item dont l'index est associé à l'élément. } }

---

A+JYT

Merci sekaijin, super explication.
Je sais maintenant que je peux mettre des attribut perso sur les tag HTML :D

Pour info le code Coffee qui fonctionne

Code:

---

1 2 3 4 5

for _, index in listOfLinks row = document.getElementById("deleteButton_#{index}") row.setAttribute('data-item', index) row.onclick = () -> deleteRow(@.getAttribute('data-item'))

---

@galerien69: Ton code ne fonctionne pas ;)

si ma méthode marche, juste t'as du mal l'utiliser. Puis même si elle marche pas _telle quelle_ parce que je suis pas à l'abri d'une faute, elle peut marcher ;)

partant de

Code:

---

1 2 3 4 5 6 7 8

for (var index = 0; index < max; index++) { row = document.getElementById('deleteButton_#'+index+''); row.data-item = index; //on associe la valeur d'index à cet élément row.onclick = function (event) { //ici on n'uutilise la référence aucune variables deleteRow(this.data-item);//on supprime l'item dont l'index est associé à l'élément. } }

---

on peut faire

Code:

---

1 2 3 4 5 6 7

Array(max).forEach(function(x,index){ row = document.getElementById('deleteButton_#'+item+''); row.onclick = function(){ deleteRow(index) } })

---

ce qui transpose en

Code:

---

1 2 3 4

Array(max).forEach (x, index)-> row = document.getElementById('deleteButton_#'+index+'') row.onclick = -> deleteRow(index)

---

je dis pas que c'est mieux, je propose juste en outils forEach

Oui j'avais bien vue le foreach et l'erreur de param.
Je précisait juste pour ceux qui viendrais après que le code que tu avais proposé ne fonctionnais pas.

Désoler si je me suis mal exprimer :calim2: