Nummerierung bei dynamischen Formular

[Jochbart]

Hallo pl,

Am Einfachsten macht sich sowas über ein Template was Loops kann. Die Idee dahinter: Anstatt im DOM rumzufummeln um irgendwo ChildNodes anzuhängen, wird an ein vorher definiertes Array ein Objekt angehängt, wobei die Objekt-ID einfach als fortlaufende Nummer geführt wird.

Und nach dem Anfügen weiterer Objekte wird diese Datenstruktur nur noch über ein Template gerendert, fertig. MfG

Hört sich logisch an, aber die Rolf schon gesagt hat, bin ich mit dieser Aussage komplett überfordert. Wo bekomme ich denn solche Templates her?

Ich habe Rolfs Code einmal übernommen und mir gestern Nacht noch durchgeschaut, ich denke ich kann alles nachvollziehen und habe es verstanden.

Jetzt ist mir noch in den Sinn gekommen, dass der Input des Feldes "Überschrift" sich beim eintippen gleichzeitig hinter den Arbeitsplatz einfügt. Von dem Tutorial hier, habe ich folgenden Code gefunden:

<h1>Beispiel: keyup Event</h1>
<main>
	<p>Sobald Sie eine Taste loslassen, wird über keyup ein Ereignis ausgelöst.</p>
	<form
	name="Test" action="">
		<input type="text" size="30" name="Eingabe" onkeyup="this.form.Ausgabe.value = this.value">
		<br>
		<input type="text" readonly size="30" name="Ausgabe">
		<br>
		<input type="reset"> </form>
</main>

Ich dachte ich kann es für meinen Fall so übernehmen, jedoch kommt es bei mir nur bei Arbeitsplatz 1 und sobald ich die weiteren hinzufüge funktioniert es nicht mehr...aber warum? Mein Code:

<form>
  <div>
    <h2><span>Arbeitsplatz </span> - <input type="text" readonly size="30" name="Ausgabe"><button type="button" name="remove">Entfernen</button></h2>
    

    
    
    
    <label for="uberschrift"><span>Überschrift:</span><input type="text" name="uberschrift" size="80" onkeyup="this.form.Ausgabe.value = this.value">
    </label>
    <label for="inhalt"><span>Text:</span><input type="text" name="inhalt" size="80"></label>
    <label for="bild"><span>Bild:</span><input name="bild" type="file"></label>
    <label for="video"><span>Video:</span><input name="video" type="file"></label>
    <label for="schluss"><span>Schlusstext:</span><input name="schluss" type="text" size="80"></label>

  </div>
</form>
<button id="newPlace" type="button">Neuer Arbeitsplatz</button>
  <button id="enter" type="submit">Daten abschicken</button>