nicht angemeldet
Hi Rolf,
mal wieder vielen Dank dass du dir so viel Mühe gibst beim beantworten meiner (dummen) Fragen. Ich habe jetzt mal den Code soweit angepasst wie ich es von dir verstanden habe (also 1-3):
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function clone_this(objButton)
{
if(objButton.parentNode)
{
tmpNode=objButton.parentNode.cloneNode(true);
objButton.form.appendChild(tmpNode);
for(j=0;j<objButton.form.lastChild.childNodes.length;++j)
{
if(objButton.form.lastChild.childNodes[j].type=='text')
{
objButton.form.lastChild.childNodes[j].value='';
break;
}
for(i=1; i<100; ++i)
var platz = "Arbeitsplatz " +i;
document.getElementById("arbeit")
.innerHTML = platz;
}
objButton.value="entfernen";
objButton.onclick=new Function('f1','this.form.removeChild(this.parentNode)');
}
}
//-->
</script>
</head>
<body>
<form>
<div>
<h2>Arbeitsplatz</h2>
<label for="uberschrift">Überschrift:</label>
<input type="text" name="headline" size="100"><br>
<br>
<label for="inhalt">Text:</label>
<input type="text" name="inhalt" size="100"><br>
<br>
<label for="bild">Bild:</label>
<input type="file" name="pic"><br>
<br>
<label for="video">Video:</label>
<input type="file" name="vid"><br>
<br>
<label for="schluss">Schlusstext:</label>
<input type="text" name="schluss" size="100"><br>
<br>
</div>
</form>
<input type="button"value="noch eins"onclick="clone_this(this)">
</body>
</html>
Ich möchte im Grunde nur diesen Arbeitsplatz, beim drücken des Buttons ohne Inhalt kopieren, da ich nicht weiss wie viel Arbeitsplätze es im Endeffekt werden können. Dabei sollen die Arbeitsplätze fortlaufend nummeriert werden von 1 an. Das habe ich mit der Schleife versucht nur bekomme es überhaupt nicht hin. Wenn der Benutzer ausversehen einmal zu viel auf "noch eins" geklickt hat, kann er dieses wieder durch einen 2. Button löschen, sprich rückgängig machen.
Hallo Jochbart,
ich versuche mal zu beschreiben, was ich davon verstanden habe, was passieren soll.
- Du hast ein Form, mit einer div-Gruppe, bestehend aus einem h2 Heading, ein paar Input-Feldern und einem "Noch eins" Button.
- Klick auf den "Noch eins" Button klont die div-Gruppe, zu der er gehört und hängt den Klon als als letztes Element ins Form.
Richtig!
- Mit relativ mühsamer DOM-Turnerei löschst Du die Eingabefelder im Klon
Wie geht es einfacher?
- dann kommt eine Schleife, die der Variablen "platz" die Werte von "Arbeitsplatz 1" bis "Arbeitsplatz 99" zuweist
Soll eig. sich der länge der erschaffenen Arbeitsplätze anpassen, weiss aber nicht wie ich es realisieren kann, deswegen einfach mal als Wert <100 genommen.
- den letzten Wert davon (also Arbeitsplatz 99) weist Du an das Element mit der id "Arbeit" zu. Davon gibt's durch den Klon mittlerweile 2, die Zuweisung erreicht das erste davon
Das war nicht gewollt! Ich wollte damit bezwecken dass das Hochzählen bei dieser id statt findet.
- Füge den input-Feldern, die type=text haben sollen, explizit
type='text'hinzu. Vorteil: dann kannst Du sie mit querySelector bzw. querySelectorAll finden.- Gib den input-Feldern ein name Attribut, sonst sind die Labels sinnlos (und sie werden beim POST nicht an den Server übertragen)
- Gib der h2 keine id. Nach dem Clone hast Du die Id mehrfach, das ist also sinnlos.
-->Geändert
Das letzte Problem - Umgang mit den geklonten Buttons - stelle ich noch zurück. Soll der "Noch eins" Button in jedem div stehen? Oder nur im letzten div?
Immer ganz unten beim letzten, hinzugefügten div.
Es wäre ggf. sinnvoller, den "Noch eins" Button aus dem div herauszunehmen und unter das form zu setzen. Den "entfernen" Button sollte man auf jedes div setzen. Es braucht dann nur etwas Logik (bzw einen div:not(:only-of-type) Selektor im CSS), um zu verhindern, dass man den letzten div block löscht.
Hab den Button mal unter form verschoben. Ich dachte ursprünglich eig. dass ich den entfernen Button auch nur ganz zum Schluss nach jedem neu hinzugefügten div haben möchte, falls man einmal zu viel "noch eins" geklickt hat. Aber was meinst du von der Usebility her was sinnvoller ist?
Das Thema "Nummerieren der DIV-Überschriften" kann man übrigens besser mit CSS Nummerierungen lösen, dann musst Du kein JavaScript dafür bauen.
Das schaue ich mir mal an.
Rolf B
Matthias Apsel
Gunnar Bittersmann