Anzeige

Dynamische Listenergänzung JavaScript

Dynamische Listenergänzung JavaScript | PSD-Tutorials.de

Erstellt von headshotsmiley, 10.10.2008.

  1. Dynamische Listenergänzung JavaScript
    Hallöchen!

    Zuerst: ich habe die Suchfunktion genutzt, aber nicht gefunden was meinem problem hilft....

    Mein Problem: Ich habe mir eine Liste erzeugt mit <input> feldern die später ausgelesen werden sollen. Der Pre-Name des feldes ist "opt"+variable die variable geht bei jedem durchlauf um einen zähler höher jetzt spuckt mir mein browser den quellcode aus und nicht den angewendeten <input> teil...

    mein quellcode:

    PHP:
    1.  
    2. function option_add() {
    3.     document.getElementById("liste").removeChild(document.getElementById("liste").firstChild);
    4.     var n = window.prompt('Wieviele Felder sollen dazu?','2');
    5.     var i;
    6.     for ( i = 0; i < n; i++) {
    7.       var newLI = document.createElement("li");
    8.       var liNummer = i + 1;
    9.       var newLIText = document.createTextNode('<input type="text" name="opt'+ liNummer + '" size="20">');
    10.       document.getElementById("liste").appendChild(newLI);
    11.       document.getElementsByTagName("li")[i].appendChild(newLIText);
    12.     }
    13. }
    14.  
    ich wäre dankbar wenn mir einer sage könnte wie man das input teil auch "ausführt"

    danke, thomas
     
    #1      
  2. Luckah

    Luckah Wiss- und Lernbegieriger

    Dabei seit:
    18.08.2007
    Beiträge:
    50
    Geschlecht:
    männlich
    Dynamische Listenergänzung JavaScript
    AW: Dynamische Listenergänzung JavaScript

    Code (Text):
    1.  
    2. [COLOR=#000000][COLOR=#007700]var [/COLOR][COLOR=#0000BB]newINPUT [/COLOR][COLOR=#007700]= [/COLOR][COLOR=#0000BB]document[/COLOR][COLOR=#007700].[/COLOR][COLOR=#0000BB]createElement[/COLOR][COLOR=#007700]([/COLOR][COLOR=#DD0000]"input"[/COLOR][COLOR=#007700]);
    3. newINPUT.type="text";
    4. newINPUT.name=[/COLOR][/COLOR][COLOR=#000000][COLOR=#DD0000]"opt'[/COLOR][COLOR=#007700]+ [/COLOR][COLOR=#0000BB]liNummer [/COLOR][COLOR=#007700]+ [/COLOR][COLOR=#DD0000]'"[/COLOR][/COLOR];
    5. newINPUT.size=20;
    6.  
    7. jetzt mit appendChild einbinden...
    8.  
    9.  
    Hoffe das war was du wolltest,
    Gruß,
    Lukas
     
    #2      
  3. Christian

    Christian verpeilt & verschallert

    Dabei seit:
    03.03.2005
    Beiträge:
    853
    Geschlecht:
    männlich
    Kameratyp:
    Canon EOS 300D
    Dynamische Listenergänzung JavaScript
    AW: Dynamische Listenergänzung JavaScript

    Schonmal drüber nachgedacht, statt der Anwendung des createTextNode, die Funktion createElement zu nutzen?

    also so:
    Code (Text):
    1.  
    2. var inputNode;
    3.  
    4. inputNode = document.createElement('input');
    5. inputNode.size="20";
    6. inputNode.type="text";
    7. inputNode.name="opt"+liNummer;
    8. document.getElementsByTagName("li")[i].appendChild(inputNode);
    9.  
    Edit:
    mist. da war jemand schneller.
     
    #3      
  4. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Dynamische Listenergänzung JavaScript
    AW: Dynamische Listenergänzung JavaScript

    Zum ausführen musst Du deine funktion im entsprechenden Elternlement aufrufen, zB:
    Code (Text):
    1.  
    2. <ul id="liste">
    3. <script>
    4.   option_add();
    5. </script>
    6. </ul>
    7.  
     
    #4      
  5. Dynamische Listenergänzung JavaScript
    AW: Dynamische Listenergänzung JavaScript

    Danke für die schnelle Hilfe, mein Problem ist gelöst worden hier der Quelltext der funktioniert:

    PHP:
    1. function option_add() {
    2.                                 document.getElementById("liste").removeChild(document.getElementById("liste").firstChild);
    3.                                 var n = window.prompt(\'Wieviele Felder sollen dazu?\',\'2\');
    4.                                 var i;
    5.                                 for ( i = 0; i < n; i++) {
    6.                                   var newLI = document.createElement("li");
    7.                                   var liNummer = i + 1;' .
    8.                                   'var newINPUT = document.createElement("input");
    9.                                     newINPUT.type="text";
    10.                                     newINPUT.name="opt"+liNummer ;
    11.                                     newINPUT.size=20;
    12.                                   document.getElementById("liste").appendChild(newLI);
    13.                                   document.getElementsByTagName("li")[i].appendChild(newINPUT);
    14.                                 }
    15.                             }
     
    #5      
  6. Christian

    Christian verpeilt & verschallert

    Dabei seit:
    03.03.2005
    Beiträge:
    853
    Geschlecht:
    männlich
    Kameratyp:
    Canon EOS 300D
    Dynamische Listenergänzung JavaScript
    AW: Dynamische Listenergänzung JavaScript

    rolf, das ist doch das, was wir alle geschrieben haben Oo
     
    #6      
x
×
×
teststefan