[DOM] Modifier un onclick avec Javascript

Version imprimable

Bonjour,

Je n'arrive pas à modifier un onclick d'une image en Javascript. J'ai bien essayer certaine méthode proposer sur ce site mais sans succès.

Je m'explique, j'ai un tableau de produit, l'utilisateur peut ajouter des lignes a ce tableau et aussi en supprimer, pour cela il clique sur un bouton supprimer en face de chaque ligne, ce bouton supprimer appel la fonction supprimer_ligne().

Et dans cette fonction je voudrais un code me permettant de modifier le onclick de toutes les autres lignes.

Voici ce que j'ai essayer :
Code:

1 2 3 4 5 6 7 if (k>ligne_supprimer) { n=k-1; document.getElementById('image_'+k).setAttribute('onclick',function(){supprimer_ligne(n);}); document.getElementById('image_'+k).onclick=function(){supprimer_ligne(n);}; }
Mais rien ne fonctionne j'ai toujours une erreur javascript :

document.getElementById('image_'+k) has no property.

Il y a t'il une autre méthode pour modifier un onclick?

19/01/2009, 09h32
SpaceFrog
la methode pour modifier le conclick est bonne, enfin tout du moins cette partie là :
Code:

1 2 document.getElementById('image_'+k).onclick=function(){supprimer_ligne(n);};
tu peux virer le setAttribute

parcontre ce qui pose souci c'est l'id ...
est tu sur d'avoir sur ta page un elemetn avec l'id "image_"+k ????

que vaut k ???

fais un alert de k ...
19/01/2009, 09h42
Sebastien14

Merci pour vos réponses.

Et bien k est une variable qui s'incrémente lors de l'ajout d'une ligne, dés que l'utilisateur ajoute une ligne la ligne va prendre l'id k ou k représente le nombre de ligne+1, et lorsqu'il clique sur le bouton supprimer en face de la ligne à supprimer j'appel la fonction supprimer_ligne(k) où k représente l'id de la ligne à supprimer.

L'id fonctionne puisque je modifie également l'id de mon image :

document.getElementById('image_'+k).id="image_"+n;

Ce code fonctionne mais lorsque je souhaite modifier le onclick, la il me met le message citer plus haut.
19/01/2009, 09h43
le_chomeur

de plus , il faut que tes lignes de code soit appelé après la création de tes lignes dans le code html /!\

C'est le cas, mes lignes de tableau sont créés via Javascript :

Code:

1
2
3
4
5
6
 
newCell = newRow.insertCell(6);
	newCell.align="center";
	newCell.style.border="1px";
	newCell.style.bordercolor="white";
	newCell.innerHTML='<img src="{ babSkinPath }/images/puces/edit_remove.png" style="cursor:pointer" id="image_'+nb+'" onclick="supprimer_ligne('+nb+')">';

19/01/2009, 09h52
le_chomeur

donc au vue de ton code l'erreur vient d'ailleur ( oui oui comme dans x-files ^^ )

peux tu poster le code généré complet ??
19/01/2009, 09h54
DoubleU

Passe par le DOM pour créer ton image, car en passant par un innerHTML, c'est typiquement le genre d'erreur que tu peux avoir

http://javascript.developpez.com/faq/?page=DOM

Citation:
Envoyé par Sebastien14
C'est le cas, mes lignes de tableau sont créés via Javascript :
Code:

1 2 3 4 5 6 newCell = newRow.insertCell(6); newCell.align="center"; newCell.style.border="1px"; newCell.style.bordercolor="white"; newCell.innerHTML='<img src="{ babSkinPath }/images/puces/edit_remove.png" style="cursor:pointer" id="image_'+nb+'" onclick="supprimer_ligne('+nb+')">';
Je crois que l'événement n'est pas associé quand il est crée avec le innerHTML,
tu peux éventuellement essayer ainsi:
Code:

1 2 3 4 5 6 newCell = newRow.insertCell(6); newCell.style.textAlign="center"; newCell.style.border="1px solid white"; newCell.innerHTML='<img src="{ babSkinPath }/images/puces/edit_remove.png" style="cursor:pointer" id="image_'+nb+'" />'; newCell.firstChild.onclick = function() { supprimer_ligne(nb); };
mais ça serait plus propre de faire comme DoubleU le propose

Et bien oui je peux :

voici mon code html qui définit mon tableau :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<table width="100%" border="1" style="border: 1px solid white" cellspacing="0" id="liste_produit">
<tr bgcolor="#FFCB15" bordercolor="black">
	<td align="center">Référence</td>
	<td align="center">DESIGNATION</td>
	<td align="center">Quantité</td>
	<td align="center">P.U. HT</td>
	<td align="center">Taux TVA</td>
	<td align="center">Montant TTC</td>
	<td bgcolor="white" style="border: 1px solid white"></td>
</tr>
</table>
<img src="{ babSkinPath }templates/{ babAddonHtmlPath }images/add_emblem.png" style="cursor:pointer" onclick="ajouter_ligne()">

Ensuite voici ma fonction ajouter_ligne() qui est appeler lorsque l'utilisateur clique sur le bouton :

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
37
38
39
40
41
42
function ajouter_ligne()
{
	nb=document.getElementById('liste_produit').rows.length;
	document.getElementById('total_ligne_produit').value=nb;
	if (nb<=0)
	{
		nb=1;
	}
	var newRow = document.getElementById('liste_produit').insertRow(-1);
	newRow.id=nb;
	var newCell = newRow.insertCell(0);
	newCell.align="center";
	newCell.style.border="1px solid black";
	//newCell.style.border.width="1";
	//newCell.style.border.solid="black";
	newCell.innerHTML= ('<input type=text name="ref_produit_'+nb+'" id="ref_produit_'+nb+'" size="8">');
	newCell = newRow.insertCell(1);
	newCell.align="center";
	newCell.style.border="1px solid black";
	newCell.innerHTML = '<input type="text" name="designation_produit_'+nb+'" id="designation_produit_'+nb+'" size="70">';
	newCell = newRow.insertCell(2);
	newCell.align="center";
	newCell.style.border="1px solid black";
	newCell.innerHTML='<input type="text" size="4" name="quantite_produit_'+nb+'" id="quantite_produit_'+nb+'" onchange="calculer('+nb+',\'qute\')">';
	newCell = newRow.insertCell(3);
	newCell.align="center";
	newCell.style.border="1px solid black";
	newCell.innerHTML='<input type="text" size="4" name="prix_unitaire_'+nb+'" id="prix_unitaire_'+nb+'" onchange="calculer('+nb+',\'pu\')">';
	newCell = newRow.insertCell(4);
	newCell.align="center";
	newCell.style.border="1px solid black";
	newCell.innerHTML='<select name="taux_tva_'+nb+'" id="taux_tva_'+nb+'" onchange="calculer('+nb+',\'tva\')"><option value="0">Pas de TVA</option><option value="5.5">5.5</option><option value="19.6">19.6</option></select>';
	newCell = newRow.insertCell(5);
	newCell.align="center";
	newCell.style.border="1px solid black";
	newCell.innerHTML='<input type="text" size="4" value="" id="montant_ttc_'+nb+'" readonly style="border-width: 0">';
	newCell = newRow.insertCell(6);
	newCell.align="center";
	newCell.style.border="1px";
	newCell.style.bordercolor="white";
	newCell.innerHTML='<img src="{ babSkinPath }/images/puces/edit_remove.png" style="cursor:pointer" id="image_'+nb+'" onclick="supprimer_ligne('+nb+')">';
}

Et lorsque qu'il clique sur le bouton supprimer la fonction supprimer_ligne est appelé :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
function supprimer_ligne(nb)
{
	//nb_ligne=document.getElementById('total_ligne_produit').value;
	nb_ligne=document.getElementById('liste_produit').rows.length;
	j=1;
	while (j<nb_ligne)
	{
		if (nb==document.getElementById('liste_produit').rows[j].id)
		{
			if (nb_ligne>1)
			{
				//supression de la ligne
				document.getElementById('liste_produit').deleteRow(j);
				ligne_supprimer=j;
				j=nb_ligne+2;
			}
		}
		j++;
	}
 
	nb_ligne=nb_ligne-1;
	if (nb_ligne<=1)
	{
		nb_ligne=1;
	}
	//mise a jour du nombre de ligne
	document.getElementById('total_ligne_produit').value=nb_ligne;
	i=1;
	while (i<nb_ligne)
	{
		document.getElementById('liste_produit').rows[i].id=i;
		i++;
	}
 
	k=1
	while (k<=nb_ligne)
	{
		//mise a jour du nom des champs
		if (k>ligne_supprimer)
		{
			n=k-1;
			document.getElementById('ref_produit_'+k).name="ref_produit_"+n;
			document.getElementById('ref_produit_'+k).id="ref_produit_"+n;
			document.getElementById('designation_produit_'+k).name="designation_produit_"+n;
			document.getElementById('designation_produit_'+k).id="designation_produit_"+n;
			document.getElementById('quantite_produit_'+k).name="quantite_produit_"+n;
			document.getElementById('quantite_produit_'+k).id="quantite_produit_"+n;
			document.getElementById('prix_unitaire_'+k).name="prix_unitaire_"+n;
			document.getElementById('prix_unitaire_'+k).id="prix_unitaire_"+n;
			document.getElementById('taux_tva_'+k).name="taux_tva_"+n;
			document.getElementById('taux_tva_'+k).id="taux_tva_"+n;
			document.getElementById('montant_ttc_'+k).name="montant_ttc_"+n;
			document.getElementById('montant_ttc_'+k).id="montant_ttc_"+n;
			document.getElementById('image_'+k).id="image_"+n;
			//document.getElementById('image_'+k).setAttribute('onclick',function(){supprimer_ligne(n);});
			document.getElementById('image_'+k).onclick=function(){supprimer_ligne(n);};
		}
		k++;
	}
 
	//recalcul du total TTC
	nb_ligne=document.getElementById('total_ligne_produit').value;
	i=1;
	var total_ttc='';
	while (i<nb_ligne)
	{
		valeur_ttc=eval(document.getElementById('montant_ttc_'+i).value);
		if (document.getElementById('montant_ttc_'+i).value!='')
		{
			if (total_ttc=='')
			{
				total_ttc=valeur_ttc;
			}
			else
			{
				total_ttc=total_ttc+valeur_ttc;
			}
		}
		i++;
	}
	document.getElementById('total_ttc').value=total_ttc;
}

19/01/2009, 10h27
Sebastien14

Merci pour vos réponses je vais regarder au niveau du DOM, si jamais cela ne fonctionne pas j'essayerai de faire autrement.
19/01/2009, 11h01
Sebastien14
Pour information, j'ai trouvé la solution à mon problème, la solution vient du setAttribute :
Voici la ligne de code comme je l'avais fais et qui ne fonctionnait pas :
Code:

1 2 document.getElementById('image_'+n).setAttribute('onclick',function(){supprimer_ligne(+n+);});
Et voici la ligne de code modifier et qui fonctionne :
Code:

1 2 document.getElementById('image_'+n).setAttribute('onclick',"supprimer_ligne("+n+")");