Discussion :

[hannibal.76]

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 :

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

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.

[sekaijin]

la syntaxe en javascript est

Code :

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

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 :

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

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 :

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

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 :

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

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

A+JYT

[hannibal.76]

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 :

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

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

[Invité]

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

Code :

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

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

[sekaijin]

Code :

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

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 :

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

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 :

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

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 :

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

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 :

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

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 :

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

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 :

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

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

[hannibal.76]

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

Pour info le code Coffee qui fonctionne

Code :

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

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

[Invité]

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 :

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

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 :

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

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 :

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

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

[hannibal.76]

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