affecter un événement onClick dynamiquent

affecter un événement onClick dynamiquent - HTML/CSS - Programmation

Marsh Posté le 10-01-2006 à 13:34:02    

Bonjour tout le monde,
 
Voilà mon problème : J'ai un formulaire dans lequel je peux ajouter des champ texte a volonté grace un un evenement onClick. Quand on clique sur ce bouton un nouveau champ texte apparait avec a coté un bouton Supprimer qui enlève le champ texte (pas n'import lequel, pas le dernier, mais celui à coté du bouton).
 
Ce que j'ai fait marche très bien sous firefox mais comme par hasard merde sous ie. Rien de mieux qu'un exemple pour mieux comprendre :http://membres.lycos.fr/forumstock/tuto/test.html
 
Voila mon code js pour ajouter un élément:
 

Code :
  1. var del = document.createTextNode("Supprimer" ); //Oon a virtuellement crée "Supprimer"
  2. var lien_del = document.createElement("p" ); //On a virtuellement crée <p></p>
  3. lien_del.setAttribute("class","lien" ); //<p></p> devient <p class="lien"></p>
  4. lien_del.setAttribute("className","lien" ); //<p></p> devient <p class="lien"></p> Gestion de l'exception ie, ie ignore la ligne au dessus, ff ignore cette ligne
  5. lien_del.setAttribute("onClick","javascript:del("+count+" )" ); //<a href="test.html"></a> devient <a href="test.html" onClick="javascript:del("+count+" );return false;"></a>
  6. lien_del.onClick = function(){
  7. del(count); //Gestion de la particularité d'ie qui n'accepte pas d'ajouter un evement avec setAttribute. ie ignore la ligne au dessus, ff ignore cette ligne
  8. }
  9. lien_del.appendChild(del); //<a href="test.html" onClick="javascript:del("+count+" );return false;"></a> devient <a href="test.html" onClick="javascript:del("+count+" );return false;">Supprimer</a>


Message édité par Asmodean le 10-01-2006 à 13:34:46
Reply

Marsh Posté le 10-01-2006 à 13:34:02   

Reply

Marsh Posté le 10-01-2006 à 13:49:51    

Perso j'aurais fait comme ça:

Code :
  1. var del = document.createTextNode("Supprimer" );
  2. var lien_del = document.createElement("p" );
  3. lien_del.className = "lien";
  4. lien_del.onmouseup  = function (){
  5. del(count);
  6. }
  7. lien_del.appendChild(del);


 
et ça doit marcher sur IE & FF...

Message cité 1 fois
Reply

Marsh Posté le 10-01-2006 à 14:02:22    

J'ai essayé avec ton code mais la ce ne marche ni sur ff ni sur ie...
 
il me met del is not a function alors que del est bien définit avant et que je peux l'utiliser avec mon code

Reply

Marsh Posté le 10-01-2006 à 14:07:35    

mets un alert à la place tu del tu verras que ça marche!!!
 
Montre tout ton js, doit y avoir une boulette quelque part!

Reply

Marsh Posté le 10-01-2006 à 14:12:36    

En effet ça marche...
 
voila le js
 

Code :
  1. function del(position){
  2. var text_fieldset = document.getElementById("zone_text" ); //On se place au niveau de notre premier fielset
  3. var labels = text_fieldset.getElementsByTagName("label" );
  4. for(var i=position;i<labels.length;i++){
  5.  var label = labels[i];
  6.  var input = label.getElementsByTagName("input" )[0];
  7.  var lien_del = label.nextSibling;
  8.  input.setAttribute("onChange","javascript:refresh("+i+" )" );
  9.  input.onChange = "refresh("+i+" )";
  10.  lien_del.setAttribute("onClick","javascript:del("+i+" )" );
  11.  lien_del.onClick = function (){
  12.   del(i);
  13.  }
  14.  label.firstChild.nodeValue = "Valeur "+i+" ";
  15. }
  16. //Suppression de la zone de texte, du lien et du saut de ligne
  17. var label = text_fieldset.getElementsByTagName("label" )[position-1];
  18. var lien = label.nextSibling;
  19. var br = lien.nextSibling;
  20. text_fieldset.removeChild(label);
  21. text_fieldset.removeChild(lien);
  22. text_fieldset.removeChild(br);
  24. }
  26. function add(){
  27. var count = document.getElementsByTagName("label" ).length; //On compte le nombre d'éléments de type label
  28. var text_fieldset = document.getElementById("zone_text" ); //On se place au niveau de notre premier fielset
  29. count ++; //On incrémente notre compteur parce qu'on rajoute un élément
  30. if (document.all) var ie = true;
  31. //création du label
  32. var nom_label = document.createTextNode("Valeur "+count+" " ); //On crée virtuellement "Valeur x"
  33. var input = document.createElement("input" ); //On crée virtuellement <input />
  34. input.setAttribute("type","text" ); //<input /> devient <input type="text"/>
  35. input.setAttribute("name","nom"+count); //<input type="text"/> devient <input type="text" name="nom"/>
  36. input.setAttribute("onChange","javascript:refresh("+count+" )" ); //<input type="text" name="nom"/> devient <input type="text" name="nom" onChange="javascript:refresh("+count+" )"/>
  37. input.onchange = "refresh("+count+" )"; //Gestion de la particularité d'ie qui n'accepte pas d'ajouter un evement avec setAttribute. ie ignore la ligne au dessus, ff ignore cette ligne
  38. var label = document.createElement("label" ); //On crée virtuellement <label></label>
  39. label.appendChild(nom_label); //On accroche "Valeur x" à la fin des enfants de label (donc au début puisqu'il n'y en a pas)
  40. label.appendChild(input); //On accroche <input type="text" name="nom" onChange="javascript:refresh("+count+" )"/> à la fin des enfants de label
  42. //Création des élement br et p
  43. var br = document.createElement("br" ); //On a virtuellement crée <br />
  44. var del = document.createTextNode("Supprimer" );
  45. var lien_del = document.createElement("p" );
  46. lien_del.className = "lien";
  47. lien_del.onmouseup  = function (){
  48.  del(count);
  49. }
  50. lien_del.appendChild(del);
  52. //On raccroche ici tous nos éléments virtuelles à une balises de notre fichier XHTML. Ils sont alors afficher  
  53. text_fieldset.appendChild(label);
  54. text_fieldset.appendChild(lien_del);
  55. text_fieldset.appendChild(br);
  57. //Ajout d'un élément d'option vide dans notre liste
  58. var liste = document.getElementById("liste_deroulante" );
  59. var select = liste.getElementsByTagName("select" )[0];
  60. var option = document.createElement("option" );
  61. var texte = document.createTextNode("" );
  62. option.appendChild(texte);
  63. select.appendChild(option);
  64. }

Reply

Marsh Posté le 10-01-2006 à 14:22:35    

Code :
  1. function del(position) {...}
  2. ...
  3. var del = document.createTextNode("Supprimer" );
  4. del(count);


 
Cherchez l'erreur...
 

Spoiler :

A mon avis c'est dangereux de nommer une variable du même nom qu'une fonction

Reply

Marsh Posté le 10-01-2006 à 14:31:51    

Ben c'était ca qui posait problème merci encore  ;)  
 
Alors j'ai une question quand même comme je ne suis pas un fin connaisseur. Je comprend bien le code que tu m'as proposé mais est-ce respectueux des standards les méthodes comme .className au lien d'utiliser un beau setAttribute  :whistle: .
 
Sinon mon premier code marchait mais avec l'evement onmouseup au lieu de onclick...quelqu'un a une explication? ca serait parce que ie ne connait pas onclick pour un objet <p>?


Message édité par Asmodean le 10-01-2006 à 14:47:46
Reply

Marsh Posté le 22-11-2007 à 12:18:31    

anapajari a écrit :

Perso j'aurais fait comme ça:

Code :
  1. var del = document.createTextNode("Supprimer" );
  2. var lien_del = document.createElement("p" );
  3. lien_del.className = "lien";
  4. lien_del.onmouseup  = function (){
  5. del(count);
  6. }
  7. lien_del.appendChild(del);


 
et ça doit marcher sur IE & FF...


 
 
Juste une remarque : le
lien_del.onmouseup  = function (){
del(count);
}
ca provoque du memory leak, javascript utilise DOM pour faire un lien vers du javascript qui plus est, une fonction inline,  c'est à eviter
 
voir :
http://forum.hardware.fr/forum2.ph [...] w=0&nojs=0


Message édité par NounouRs le 22-11-2007 à 12:20:06
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed