Soucis avec onClick de button créé dynamiquement

Bonjour,

j'ai parcouru google à plusieurs reprises et ici aussi. J'ai un soucis avec le onClick du type boutton créé dynamiquement.

Le script JavaScript permet d'ajouter une ligne dans un tableau lorsque la fonction "UnEffetPlus()" est appelée (et qui fonctionne très bien) et normalement de retirer la ligne demandée par la fonction "UnEffetMoins(tr.id)" (qui ne fonctionne pas). Mais cela ne va pas.

Voici le bout de code javascript qui permet de créé un boutton

Code:

---

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

var Article = { UnEffetPlus: function() { effet++; var tr = document.createElement("TR"); var td_1 = document.createElement("TD"); var td_2 = document.createElement("TD"); var input1 = document.createElement("INPUT"); var input2 = document.createElement("INPUT");   input1.name="InputEffet"+effet; input1.type="text"; input1.id="InputEffet"+effet; input2.name="InputBEffet"+effet; input2.type="button"; input2.value="-"; input2.id="InputBEffet"+effet; input2.setAttribute("class","bouton"); tr.id="trEffet"+effet; input2.setAttribute("onClick","Article.UnEffetMoins(tr.id)"); td_2.appendChild(input1); td_2.appendChild(input2); tr.appendChild(td_1); tr.appendChild(td_2);   $("tbodyEffet").appendChild(tr); },   UnEffetMoins: function(index) { alert("index : " +index); $(index).style.visibility='hidden'; $(index).style.display='none'; effet--; } }

---

J'ai également essayer

Code:

---

input2.onClick="Article.UnEffetMoins(tr.id)";

---

mais rien à faire :s

Je suis un peu perdu... Je fais mes tests sous FireFox 3.5.5

Merci de votre aide

Bonjour,

Le tr.id pose déjà problème.

Code:

---

1 2 3 4

tr.id="trEffet"+effet; var monAppel = "Article.UnEffetMoins(" + tr.id +")"; input2.setAttribute("onClick",monAppel);

---

Mais, je n'ai pas regardé le reste. Je me souviens avoir eu des problème pour rajouter des onclick de cette manière et pour les résoudre j'avais du utiliser une syntaxe différente.

Bonjour

merci de me répondre aussi rapidement :)

En effet... en relisant mon code, j'ai remarqué qu'il y avait un soucis avec le "tr.id", j'avais modifié en mettant

Code:

---

input2.setAttribute("onClick","Article.UnEffetMoins("+tr.id+")");

---

et cela n'allais pas pour autant.

J'ai ensuite vu ta réponse et essayé cette solution qui fonctionne mais j'ai un 2ieme soucis maintenant ^^

J'utilise FireBug et lorsque je clique sur le bouton "-" qui lance la fonction UnEffetMoins(index).

J'ai cette réponse.

Citation:

---

trEffet2 is not defined
function onclick(event) { Article.UnEffetMoins(trEffet2); }(click clientX=725, clientY=265)

---

trEffet2 est créé dynamiquement.

Une petite idée?

Salut.
Contrairement à ce que beaucoup croient,

Code:

---

elementHTML.setAttribute('onclick', callback);

---

et

Code:

---

elementHTML.onclick = callback:

---

ne sont pas du tout équivalents.
Dans le premier cas, tu crées un attribut onclick à ta balise. Ce qui veut dire que tu perds le contexte de la fonction appelante, du coup, ton objet Article n'existe plus dans le contexte de la fonction anonyme générée par le onclick.
Dans le second cas, tu ajoutes à un objet JavaScript (qui pointe vers une balise HTML) une méthode et comme celle-ci est déclarée au sein d'une fonction, elle hérite de son contexte et reconnait ton objet Article.

J'suis pas sûr d'avoir tout à fait compris, mais j'pense.

Donc, j'ai rechangé et j'ai mis ceci

Code:

---

input2.onClick=Article.UnEffetMoins(tr.id);

---

Est-ce que c'est normal que lorsque je rentre dans la fonction UnEffetPlus(), il exécute directement UnEffetMoins(trEffet2) ? Alors que je n'ai pas encore cliqué sur le bouton créé dynamiquement?

Citation:

---

Envoyé par Noodlex

J'suis pas sûr d'avoir tout à fait compris, mais j'pense.

Donc, j'ai rechangé et j'ai mis ceci

Code:

---

input2.onClick=Article.UnEffetMoins(tr.id);

---

Est-ce que c'est normal que lorsque je rentre dans la fonction UnEffetPlus(), il exécute directement UnEffetMoins(trEffet2) ? Alors que je n'ai pas encore cliqué sur le bouton créé dynamiquement?

---

là tu vas coller sur le onclick le retour à la fonction Article.UnEffetMoins
Il ne faut pas executer cette fonction, donc soit tu la met dans une autre fonction que tu colles dessus (sans mettre les parentheses) soit tu déclares cet appel dans une fonction anonyme.

Code:

---

1 2 3 4

input2.onClick=function() { Article.UnEffetMoins(tr.id); }

---

il se peut que tu sois obligé sous IE de passer les paramètres à la fonction anonyme
Il me semble déja avoir été géné par cela :

Code:

---

1 2 3

input2.onClick=function(tr.id) { Article.UnEffetMoins(tr.id); }

---

Ah d'accord !

Donc j'ai rechangé en

Code:

---

input2.onClick=function() { Article.UnEffetMoins(tr.id); };

---

Mais toujours aucune réaction.

@SpaceFrog : je suis sous FF 3.5.5 et il n'aime pas le function(tr.id) (enfin du moins c'est ce que me dis FireBug

Citation:

---

Envoyé par Noodlex

Ah d'accord !

Donc j'ai rechangé en

Code:

---

input2.onClick=function() { Article.UnEffetMoins(tr.id); };

---

Mais toujours aucune réaction.

@SpaceFrog : je suis sous FF 3.5.5 et il n'aime pas le function(tr.id) (enfin du moins c'est ce que me dis FireBug

---

onclick est en minuscule que ce soit en HTML ou en JS

Super ca fonctionne, merci beaucoup à tout le monde :)