On the fly generierten Button Wert mitgeben

[cr_man]

Hallo zusammen,

ich bastel mir gerade mittels JavaScript eine kleine Seite wo der User sich ein Formular zusammen klicken kann und am Ende bekommt er den fertigen Quellcode ausgespuckt.

Soweit funktioniert das meiste auch schon, ich habe nur ein Problem beim entfernen von Elementen.

Ich gebe jedem neuem Element das der User generiert einen Button am Ende mit, damit dieser dieses Element bei Bedarf auch wieder löschen kann.

Im Firefox funktioniert das auch Problemlos, mittels:

document.createAttribute("onClick");
loesch_handler.nodeValue = "element_loeschen(this.value)";

nur der IE 6.0 macht mal wieder probleme.

Hab das ganze auch schon per attachEvent('onclick',element_loeschen) probiert, die Funktion wird zwar aufgerufen, nur ich bekomme die ID nicht mit übergeben, so dass ich nicht weiss welches Element gelöscht werden soll.

Hat dazu jemand noch einen Tipp wie ich im IE die ID mit übergeben kann?

Vielen Dank schonmal im vorraus,
Grüße aus dem Saarland

[Struppi]

Ich gebe jedem neuem Element das der User generiert einen Button am Ende mit, damit dieser dieses Element bei Bedarf auch wieder löschen kann.

Im Firefox funktioniert das auch Problemlos, mittels:

document.createAttribute("onClick");
loesch_handler.nodeValue = "element_loeschen(this.value)";

Das das funktioniert ist seltsam. du erzeugst ein Attribut das onClick heißt und da es kein onClick Handler gibt dürfte hier eigentlich nichts passieren.

Du hast hier eine falsche Vorstellung, die ganzen DOM Methoden set-, get- und createAttribute sind in HTML Seiten nicht notwendig. Ein Button hat per se den onclick Handler und Attribut kannst du problemlos mit [objekt].attribute = Wert ändern.

Also in deinem Fall:
document.onclick = function(e) { element_loeschen( this.value) ; };

wobei das aber nicht gewünschte macht, da this in der Funktion gleich document ist. Du musst this (ich nehme an das ist das Objekt) in eine Temporäre Variabel zwischen speichern.

Struppi.

[cr_man]

Hier mal die komplette Funktion welche input type=text Boxen erstellt.

function neues_element(art){
  if(art == "Text"){
   //alert("Es ist die Textbox");
   var newTEXT = document.createElement("input");
   var br = document.createElement("br");
   var inpu_art = document.createAttribute("type");
   var inpu_name = document.createAttribute("name");
   var inpu_id = document.createAttribute("id");
   var inpu_size = document.createAttribute("size");
   var inpu_value = document.createAttribute("value");
   var textarea_text;
   var br_text="";

var loesch_button = document.createElement("input");
   var loesch_art = document.createAttribute("type");
   var loesch_name = document.createAttribute("name");
   var loesch_size = document.createAttribute("size");
   var loesch_value = document.createAttribute("value");
   var loesch_handler = document.createAttribute("onClick");

inpu_art.nodeValue = "text";
   inpu_name.nodeValue = document.getElementById("text_name").value;
   inpu_id.nodeValue = document.getElementById("text_name").value;
   inpu_size.nodeValue = document.getElementById("text_size").value;
   inpu_value.nodeValue = document.getElementById("text_value").value;

loesch_art.nodeValue = "button";
   loesch_name.nodeValue = "loeschen"+i;
   loesch_size.nodeValue = "5";
   loesch_value.nodeValue = "Del"+i;
   loesch_handler.nodeValue = "element_loeschen(this.value)";

if(document.getElementById("umbruch").checked){
    alert("Zeilenumbruch ist an!");
    document.getElementById("test_form").appendChild(br);
    br_text = "<br>";
   }

newTEXT.setAttributeNode(inpu_art);
   newTEXT.setAttributeNode(inpu_name);
   newTEXT.setAttributeNode(inpu_id);
   newTEXT.setAttributeNode(inpu_size);
   newTEXT.setAttributeNode(inpu_value);

loesch_button.setAttributeNode(loesch_art);
   loesch_button.setAttributeNode(loesch_name);
   loesch_button.setAttributeNode(loesch_size);
   loesch_button.setAttributeNode(loesch_value);
   //loesch_button.attachEvent('onclick',element_loeschen)
   loesch_button.setAttributeNode(loesch_handler);

document.getElementById("test_form").appendChild(newTEXT);
   document.getElementById("test_form").appendChild(loesch_button);

Über Anregungen und Kritik bin ich jeder Zeit dankbar, bin gerade dabei mich in die Materie JS einzuarbeiten.

Vielen Dank für deinen Hinweis Struppi, ich versuche es jetzt mal umzusetzen.

[Struppi]

function neues_element(art){
  if(art == "Text"){
   //alert("Es ist die Textbox");
   var newTEXT = document.createElement("input");
   var br = document.createElement("br");
   var inpu_art = document.createAttribute("type");
   var inpu_name = document.createAttribute("name");
   var inpu_id = document.createAttribute("id");
   var inpu_size = document.createAttribute("size");
   var inpu_value = document.createAttribute("value");

Das ist was ich meine.
Mach mal folgendes:

  
var newTEXT = document.createElement("input");  
var attribute = newTEXT.tagName + ' hat folgende Attribute: \n';  
for(var a in newTEXT) attribute += a + '\n';  
alert(attribute);  

var loesch_handler = document.createAttribute("onClick");

und das attribut existiert nicht. Das existierende und funktionierende Attribut bzw. der Eventhandler heißt onclick.

Wie gesagt es funktioniert problemlos: element.attribut = wert;

Struppi.

[cr_man]

function neues_element(art){
  if(art == "Text"){
   //alert("Es ist die Textbox");
   var newTEXT = document.createElement("input");
   var br = document.createElement("br");
   var inpu_art = document.createAttribute("type");
   var inpu_name = document.createAttribute("name");
   var inpu_id = document.createAttribute("id");
   var inpu_size = document.createAttribute("size");
   var inpu_value = document.createAttribute("value");

Das ist was ich meine.
Mach mal folgendes:

var newTEXT = document.createElement("input");
var attribute = newTEXT.tagName + ' hat folgende Attribute: \n';
for(var a in newTEXT) attribute += a + '\n';
alert(attribute);

>   
> >    var loesch\_handler = document.createAttribute("onClick");  
>   
> und das attribut existiert nicht. Das existierende und funktionierende Attribut bzw. der Eventhandler heißt onclick.  
>   
> Wie gesagt es funktioniert problemlos: element.attribut = wert;  
>   
> Struppi.  
  
Hallo Struppi,  
  
vielen Dank nochmal für deine Hilfe. Bin jetzt seit ca. 3 Stunden am probieren und versuchen. Hab mir deine Artikel auch auf deiner Webseite durchgelsen, sehr Informativ!  
  
Nur leider bin ich immer noch nicht weiter.  
  
Ich hab es jetzt wie folgt versucht:  
  
var loesch\_button = document.createElement("input");  
loesch\_button.onclick = "element\_loeschen()";  
  
Nur passiert so im IE und Firefox leider nichts. Was mache ich hier falsch?  
  

[Struppi]

Ich hab es jetzt wie folgt versucht:

var loesch_button = document.createElement("input");
loesch_button.onclick = "element_loeschen()";

Kein String zuweisen, sonder eine Funktionsreferenz.

entweder:
loesch_button.onclick = element_loeschen;

ohne Klammern!!!

oder

loesch_button.onclick = function(e) { element_loeschen(); };

Struppi.

[cr_man]

Hallo Struppi,

loesch_button.onclick = function(e) { element_loeschen(); };

war die Lösung!

Vielen Dank für deine Hilfe.