Discussion :

[Noodlex]

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 :

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

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

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

[vermine]

Bonjour,

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

Code :

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

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.

[Noodlex]

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 :

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

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.

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

trEffet2 est créé dynamiquement.

Une petite idée?

[Bovino]

Salut.
Contrairement à ce que beaucoup croient,

Code :

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

elementHTML.setAttribute('onclick', callback);

et

Code :

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

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.

[Noodlex]

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

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

Code :

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

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?

[Gatsu35]

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

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

Code :

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

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 :

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

1
2
3
4
 
input2.onClick=function() {
    Article.UnEffetMoins(tr.id);
}

[SpaceFrog]

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 :

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

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

[Noodlex]

Ah d'accord !

Donc j'ai rechangé en

Code :

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

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

[Gatsu35]

Ah d'accord !

Donc j'ai rechangé en

Code :

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

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

[Noodlex]

Super ca fonctionne, merci beaucoup à tout le monde