Neues Element erstellen von the fr3ak, 21.02.2008 22:54

Neues Element erstellen

the fr3ak 21.02.2008 22:54

javascript

Ich habe einen Code geschrieben, bei dem bei der Eingabe in ein INPUT-Feld ein neues Feld erzeugt wird. Diese neuen Felder sollen somit dynamisch erzeugt werden und wie die schon bestehenden Felder zu behandeln sein.
Mit der "press"-Funktion wird die Checkbox verwaltet und mit "create" sollte somit eine neue Checkbox, sowie ein neues Feld erzeugt werden (mit denselben Attributen usw.). Die Variable "i" überwacht nur, dass nicht bei jedem Keydown ein neues Feld entsteht, sondern nur bei der Eingabe des ersten Zeichens.

Mein Problem ist nun, dass folgendes Programm im Internet Explorer und im Safari nicht korrekt ausgeführt wird. Im Firefox und Opera funktioniert es (fast) problemlos.

Anmerkung: Die Auswahl der Checkbox wird bei ausgefülltem Feld angewählt und bei leerem Feld wieder entfernt

Ich habe noch einen weiteren Fehler entdeckt, aber diesen noch nicht versucht zu lösen. Um diesen geht es nun auch nicht.

Ich programmiere noch nicht lange JavaScript. Es kann somit auch andere Fehler enthalten.

<html>

var i = 1;

function press(num)
{
if(document.umfrage.text[num].value=="")
         {
  document.umfrage.check[num].checked=false;
         }else{
  document.umfrage.check[num].checked=true;
         }
}

function chksel(num)
{
if(document.umfrage.text[num].value=="")
         {
          document.umfrage.check[num].checked=false;
         }
}

function create(num2)
{

var numesp = document.umfrage.text.length;

i++;
var nbr = numesp + 1;
if(i==2)
{
var br = document.createElement("br");

var inpt = document.createElement("input");
                 var type = document.createAttribute("type");
                 var name = document.createAttribute("name");
                 var clck = document.createAttribute("onClick");
                 type.nodeValue = "checkbox";
                 name.nodeValue = "check";
                 clck.nodeValue = "chksel(" + numesp + ")";
                 inpt.setAttributeNode(type);
                 inpt.setAttributeNode(name);
                 inpt.setAttributeNode(clck);

var intx = document.createElement("input");
                 var sztx = document.createAttribute("size");
                 var intp = document.createAttribute("type");
                 var nmtx = document.createAttribute("name");
                 var kyup = document.createAttribute("onKeyup");
                 var blur = document.createAttribute("onBlur");
                 var kydw = document.createAttribute("onKeydown");
                 sztx.nodeValue = "40";
                 intp.nodeValue = "text";
                 nmtx.nodeValue = "text";
                 kyup.nodeValue = "press(" + numesp + ")";
                 blur.nodeValue = "less(this)";
                 kydw.nodeValue = "press(" + numesp + ");create(" + nbr + ")";
                 intx.setAttributeNode(sztx);
                 intx.setAttributeNode(intp);
                 intx.setAttributeNode(nmtx);
                 intx.setAttributeNode(kyup);
                 intx.setAttributeNode(blur);
                 intx.setAttributeNode(kydw);

var box = document.getElementById("box");
                 box.appendChild(br);
                 box.appendChild(inpt);
                 box.appendChild(intx);
         }
}

function less(element)
{
if(element.value!="")
         {
          i = 1;
         }
}

</script>

<body>

</div>

</form>
</body>
</html>

Vielen Dank im Voraus
the fr3ak

Beitrag melden

– Informationen zu den Bewertungsregeln

Neues Element erstellen
plan_B 22.02.2008 13:34

javascript
– Informationen zu den Bewertungsregeln
Hallo,

es ist kaum zu glauben, aber der IE schafft es nicht, dynamisch erzeugte Elemente anhand des Namens wiederzufinden, ...

also er findet hier nur die statisch erzeugten Elemente
```
  
var numesp = document.umfrage.text.length;  
```
das gleiche Ergebnis würde auch liefern
```
  
var numesp = document.getElementsByName('text').length;  
```
... es sei denn, man behebt dieses Problem mittels Browserweiche (conditional compilation) wie z.B. hier: http://forum.de.selfhtml.org/archiv/2007/11/t162214#m1055612

wie du in dem Bsp. siehst, lassen sich Attribute auch viel einfacher als über setAttributeNode() definieren.
```
  
 var intx = create_input('text','text');  
 intx.size = 40;  
```
unschön ist auch, dass du den Eventhandlern Strings anstatt einer Referenz einer Funktion zuweist, aber das ist eine andere Baustelle ...

Gruß plan_B

--
*®*´¯`·.¸¸.·
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

the fr3ak: Neues Element erstellen