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

Discussions similaires

Partager

Partager