Modification attribut onclick

**Vantrax** · 10/02/2010, 13h43

Bonjour,

Je souhaite r�aliser une petite fonctionnalit� dont l'impl�mentation me parait triviale ... cependant �tant d�butant en JS je n'arrive pas � cibler le probl�me. Votre expertise pourrait sans aucun doute m'aiguiller dans ma d�marche de "d�buggage".

Probl�matique

Je souhaite pouvoir cr�er et supprimer des couples de boutons dont le premier permet d'afficher l'indice du bouton et le second de supprimer le couple correspondant.

Solution

Pour cela je supprime le couple de bouton concern� puis je r�affecte l'ensemble des valeurs,nom,id et la propri�t� "onclick" de l'ensemble des
couples de boutons d'indices sup�rieurs � celui supprim�.
Le comportement ind�sirable apparait lorsque le nombre de couple est sup�rieur � 2 et que l'on supprime un bouton non situ� en derni�re position.
Je ne pense pas que le probl�me soit d'ordre algorithmique ... une id�e ?

Ci-joins un code exemple qui permet de reconstituer l'erreur, j'esp�re ne pas trop avoir d�natur� le probl�me en tentant de le simplifier.
Comme pr�cis� pr�c�demment je suis novice en JS/d�veloppement Web donc tout commentaire sera la bien venue.

En vous souhaitant une agr�able journ�e, merci d'avance

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<body>
 
<div id="groups">
<input type="button" name="add F" value="new F" size="20" onclick="addF()" />
  <div id="Div_F1">
    <input type="button" name="F_1" value="F 1" size="20" onclick="alert(1)" />
    <input type="button" name="D_1" value="Delete" size="20" onclick="del(1)" />
  </div>
</div>
 
 
 
</body>
</html>
 
<script>
 
var F_count = 1;
 
function addF(){
 
  F_count++;
 
  var c, ch1, ch2;
 
  c=document.getElementById('groups');
 
  newDiv = document.createElement("div");
  newDiv.setAttribute('id','Div_F'+F_count);
  ch1=document.createElement('input');
  ch1.setAttribute('type','button');
  ch1.setAttribute('id','F_'+F_count); 
  ch1.setAttribute('name','F_'+F_count); 
  ch1.setAttribute('value','F '+F_count); 
  ch1.setAttribute('onclick','alert('+F_count+')'); 
  newDiv.appendChild(ch1);
 
  ch2=document.createElement('input');
  ch2.setAttribute('type','button');
  ch2.setAttribute('id','D_'+F_count); 
  ch2.setAttribute('name','D_'+F_count); 
  ch2.setAttribute('value','Delete '); 
  ch2.setAttribute('onclick','del('+F_count+')'); 
  newDiv.appendChild(ch2);
  c.appendChild(newDiv);
}
 
// 
 
function del(toDel){
 
    //suppression de l'element
 
    c=document.getElementById('groups');
    divDel =document.getElementById('Div_F'+toDel);
    c.removeChild(divDel);
 
    // modification des elements 
    for(i = toDel+1; i <= F_count;i++){
 
	var ND = i-1;
 
	document.getElementById('Div_F'+i).id = 'Div_F'+ND;
 
	document.getElementById('F_'+i).name = 'F '+ND;
	document.getElementById('F_'+i).value = 'F '+ND;
	document.getElementById('F_'+i).id = 'F_'+ND;
	document.getElementById('F_'+ND).onclick = function(){alert(ND);}
 
	document.getElementById('D_'+i).value = 'Delete';
	document.getElementById('D_'+i).name = 'D_'+ND;
	document.getElementById('D_'+i).id   = 'D_'+ND;
	document.getElementById('D_'+ND).onclick = function(){del(ND);}
    }
    F_count--;
}
 
</script>

**SpaceFrog** · 10/02/2010, 14h15

Me premi�re remarque concernera l'attribtuon dynamique du name...
Elle ne fonctionne pas sous IE

la seconde est l'attribution d'une fonction avec variable incr�ment�e dans la boucle, le souci est que c'est la derni�re valeur de l'incr�ment qui ser prise en compte ...
C'est expliqu� dans la FAQ, ainsi que le rem�de

**E.Bzz** · 10/02/2010, 14h20

Bonjour,

+1 pour SpaceFrog.

Mais en plus, il me semble que ta variable ND pose aussi probl�me (celui du d�calage) : pourquoi ne pas toujours utiliser i ?

Tu peux ajouter un alert() dans la fonction de suppression, pour v�rifier ce qui est effectivement ex�cut� (avec le d�calage que tu fais apr�s une suppression, difficile de "voir" quel �l�ment est vraiment supprim�)

A+

**Vantrax** · 10/02/2010, 18h12

Merci beaucoup, le probl�me est maintenant r�solut gr�ce � la qualit� de cette fac et � la sympathie des acteurs de ce forum.

Bonne fin de journ�e

Modification attribut onclick

JavaScript

Vue hybride

Discussions similaires

Partager

Partager