Ohne Server-Code geht's gar nicht

[Jochbart]

Hallo Rolf,

1. getElementByClassName funktioniert nicht, weil die Funktion getElementsByClassName heißt.

Sorry mein Tippfehler hier. Ich habe natürlich im Code getElementsByClassName benutzt, nur hier eben vergessen. Die Frage war eher darauf bezogen warum es dennoch nicht funktioniert...

2. Ich habe Dich belogen - es gibt keine innerHtml Eigenschaft. Sie heißt innerHTML. Deswegen hat das nicht funktioniert, was ich letztens geschrieben habe.

Ja das habe ich bemerkt gehabt, funktioniert leider immer noch nicht. 😟

2. IDs funktionieren in deiner Aufgabenstellung nicht. Es hilft nicht, ein dropdown per id finden zu wollen, nach dem ersten clone hast Du die IDs mehrfach.…

Das habe ich schon bereits aus deinem Beitrag zuvor verstanden, deswegen habe ich mich ja versucht auf den name zu beziehen was jedoch nicht funktionierte, also bin ich wieder zurück zur container id um es lediglich dir zu zeigen (hatte Kommentar hinterlegt).

Zum Beispiel diese existierende Registrierung hier, für das input-Event der Überschrift:

            form.addEventListener("input", function (evt) {
                if (evt.target.name == "uberschrift")
                   updateHeader(sectionFor(evt.target), evt.target.value);
            });

Hast Du Dir die Doku zu addEventListener durchgelesen? Folgendes ist hier wichtig und sollte von Dir auch für das change-Event auf dem Dropdown beachtet werden!

Ja ich habe es mir durchgelesen und verstehe auch (denke ich) dieses input Event. Ich habe es versucht mit Hilfe deines addEventListener für anzBilder es zu realisieren, jedoch ohne Erfolg.

• Der Handler wird nicht auf dem Input-Element, sondern auf dem form registriert. Mit Absicht - ein input-Event wird zwar auf dem Input-Element ausgelöst, blubbert dann aber in der Elementhierarchie des Dokuments hoch, bis ganz nach oben zum body-Element (oder sogar bis zum html-Element? Weiß grad nicht). D.h. wenn ich den Eventhandler auf dem form registriere, bekomme ich alle input-Events mit, die irgendwo im form gefeuert werden, ohne mich explizit auf Elemente innerhalb des Forms registrieren zu müssen. Das spart Arbeit beim Registrieren und beim Klonen.

Das verstehe ich.

• Der Handler bekommt als Parameter ein Event-Objekt (-> Doku+Tutorials), und darin gibt's eine Eigenschaft target, in der das Element steht auf dem das Event ausgelöst wurde. Wenn ich das change-Event für alle Dropdowns behandeln will, die für einen Arbeitsplatz die Anzahl der Bilder steuern, dann muss ich diesem select-Element Merkmale geben, die ich abfragen kann. Das kann eine Klasse sein (abfragen mit classList.contains("klassenname")), ein name-Attribut oder ich kann auch den tagName abfragen. Eine ID ist nicht geeignet. IDs müssen auf der Seite eindeutig sein. Das Beispiel oben hat das name-Attribut geprüft. Das kannst Du für das Dropdown auch tun (top10 ist allerdings kein guter Name, weil du ähnliches ja auch noch für die Videos tun willst)

Ich werde auch nur noch mit anzBilder und anzVideos arbeiten.

• Wenn Du außer für die Bilder auch noch ein Dropdown für die Videos haben willst, brauchst Du keine neue Eventhandler-Registrierung. Du hast schon einen Eventhandler, und in dem baust Du eine zweite Prüfung für Event-Quellen ein. Für name="top10" (oder "anzBilder") wird die Liste der Bild-Uploads geändert, und für name="anzVideos" die Liste der Video-Uploads.

Ich bekomme ja nicht einmal das für die Bilder gerade hin, deswegen möchte ich erst mal Schritt für Schritt voran gehen. Wenn ich es hinbekomme für die Bilder wird es ja das selbe Schema F für die Videos sein.

Da steht:
updateHeader(sectionFor(evt.target), evt.target.value)
Mir scheint, dass Du noch nicht verstanden hast, was da passiert - du hast diesen Teil nämlich konsequent ignoriert. Hier wird zuerst die sectionFor Funktion aufgerufen und bekommt das Event-Target als Parameter. Die sectionFor-Funktion beginnt bei dem übergebenen DOM Element und sucht sich über die parentNode Kette den Weg nach oben, bis es ein Element mit tagName = 'section' findet. Dein HTML ist so gegliedert, dass jeder Arbeitsplatz in ein <section>...</section> eingeschlossen ist. Das Funktionsergebnis, also das section-Element innerhalb dessen das event ausgelöst wurde, sowie im Beispiel die value-Eigenschaft des Elements auf dem das Event ausgelöst wurde, werden als Parameter an updateHeader übergeben.

Diese Beschreibung von dir hat auf jeden Fall nochmal richtig klick gemacht bei mir! Danke dafür. Was ich jedoch immer noch nicht so richtig denke zu verstehen ist die sectionFor Funktion. Für was brauche ich zum Beispiel .toLowerCase? Also ich kenn die Funktion davon aber mir leuchtet nicht ein warum ich das an dieser Stelle brauche.

• Dein Handler, der die Upload-Elemente erzeugt, sollte genauso aufgerufen werden. Deine addInputFields Funktion sollte also - so wie updateHeader - zwei Parameter erwarten: Die Section und die Anzahl. Und sie sollte nicht addInputFields heißen, ihr Name sollte darlegen, dass sie die Anzahl der Bilder-Uploads festlegt.

Damit spiele ich die ganze Zeit schon...klappt aber nicht so wie ich das möchte.

• Damit das Folgende funktioniert, braucht dein HTML noch eine Anpassung. Das Label mit dem Bild-Upload Element darin muss in einem li in dem vorbereiteten Bilder-ul stehen, sonst hast Du nachher eins zuviel. Und das div mit id="container" ist Kunst, die weg kann.

Diese 2 Punkte habe ich schon gar nicht mehr beachtet, sie waren einfach noch Überbleibsel vom Anfang.

• Dann hängst Du dem ul die benötigte Zahl von neuen li ein. Im CSS musst Du sicherstellen, dass der list-style von ul.bilder auf none steht, damit Du die kleinen Punkte davor nicht hast. Ggf. musst Du auch noch margin und padding von ul und li anpassen. Da, wo ich name='..' geschrieben habe, musst Du natürlich etwas Zeichenketten-Akrobatik betreiben, damit in den Hochkommas nachher sowas wie bild_7 steht. Tipp: 'bild_'+i funktioniert - JavaScript erkennt, dass da ein String mit einer Zahl verbunden wird und wandelt i in eine Zeichenkette um.

CSS habe ich ja schon geschrieben gehabt, hatte es nur in Kommentare gesetzt um die Punkte am Anfang zu sehen um sicher zu gehen das es klappt. Und mit "bild_"+1 hatte ich ja schon in meiner Schleife leicht abgeändert benutzt.

Es betrübt mich, dich betrüben zu müssen: Ohne serverseitigen Code kommst Du meines Wissens nicht weiter. Du brauchst eine Komponente, die die angegebenen Dateien oder Videos entgegennimmt und irgendwo ablädt. Zumindest dann, wenn Du die Dateien über den POST eines HTTP form ablädst. Das kann ein PHP Script sein oder sonst ein programmiertes Artefakt, aber der multipart/form-data Body des POST-Request, den ein HTML-Form mit input type="file" ausspuckt, wird serverseitig nicht ohne dein Zutun verstanden.

Ich hatte gehofft dabei irgendwie auf PHP bzw. Server zu verzichten oder sogar offline das ganze nur auf einem lokalen Rechner (Laufwerk für "Backup" ist vorhanden) abzuspeichern und zu betreiben.

PHP ist sicherlich der einfachste Weg, um hier etwas auf die Beine zu bekommen. SelfHTML ist allerdings nicht sehr stark in PHP Tutorials. Wir haben aber ein kleines PHP Portal mit vielen Links.

Schau ich mir auf jeden Fall die Tage an!

Speichern der Bilder allein reicht aber nicht. Du brauchst ja auch eine Idee, wie die hochgeladenen Arbeitsplatzinformationen nachher einem Benutzer präsentiert werden können. Und wie Du sie auf deinem Server speichern willst. Eine Datenbank? Eine Verzeichnisstruktur mit einem Ordner pro AP und eine html-Datei, die die Bilder und Videos präsentiert?

Ja eine weitere HTML-Datei/Seite zum präsentieren soll es auf jeden Fall sein! Wie gesagt ich dachte eher an eine Ordnerstruktur auf dem Laufwerk oder Rechner und von dort die "Uploads" zu speichern und abzurufen. Ich hatte auch mal irgendwo was von AJAX und File APi, hab aber keine Ahnung wie das geht.

Oh f*ck. Ich werde hier noch zum Prof, wenn ich mir den Umfang dieses geistigen Auswurfs betrachte…

Also Rolf, ich glaube wir müssen uns mal treffen. Ich schulde dir viel und bezahle gerne in Bier. 😉

Mein "neues" fiddle. Sorry es wird immer mehr mit Kommentaren durch meine Rumspielerei.

Gruß, Jochbart

Rolf

sumpsi - posui - clusi