Discussion :

[Sebastien14]

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 :

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

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?

[SpaceFrog]

la methode pour modifier le conclick est bonne, enfin tout du moins cette partie là :

Code :

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

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

[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.

[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 /!\

[Sebastien14]

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

Code :

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

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+')">';

[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 ??

[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

[marcha]

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

Code :

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

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 :

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

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

[Sebastien14]

Et bien oui je peux :

voici mon code html qui définit mon tableau :

Code :

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

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 :

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

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
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;
}

[Sebastien14]

Merci pour vos réponses je vais regarder au niveau du DOM, si jamais cela ne fonctionne pas j'essayerai de faire autrement.

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

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

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

Et voici la ligne de code modifier et qui fonctionne :

Code :

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

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