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