Modification attribut onclick
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:
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> |
