Hallo Joachim, wenn Du auf zentrale Wartung Wert legst, dann solltest Du vielleicht noch etwas länger nachdenken, bevor Du loslegst. Du hast - wie es scheint - für jedes Material den Text, der zum Button / zur Checkbox gehört, und du hast den Text, der in der Doku erscheinen soll. Diese Texte sind nicht die Gleichen, wenn ich mir dein Beispiel zu Anfang anschaue. Im schlimmsten Fall hast Du pro Checkbox 3 Werte: Eine ID, eine Checkbox-Beschriftung und einen Dokumentationseintrag. Wenn ich dein Eingangsbeispiel anschaue, wäre eine solche Dreiergruppe zum Beispiel "afa2", "flow 2" und "flow a2 lot: 12345". Oder "afa35", "flow a3,5 lot: 34567". So etwas kann man in einem Objekt speichern: ~~~js const materialListe = { "afa2": { label: "flow 2", text: "flow a2, lot: 12345" }, "afa3": { label: "flow 3", text: "flow a3, lot: 23456" }, "afa35": { label: "flow 3,5", text: "flow a3,5, lot: 34567" }, // und so weiter }; ~~~ Wenn Du deine Checkboxen (oder Radiobuttons) nach einem einheitlichen Schema im HTML aufbaust, zum Beispiel so: ~~~html <label><input type="checkbox" name="afa2"></label> <label><input type="radio" name="afa47"></label> ~~~ dann kann man dafür sorgen, dass die Anzeigetexte aus dem Materialienobjekt automagisch eingesteuert werden. Dazu entfernt man die Texte aus dem HTML und setzt einen leeren span an ihre Stelle: ~~~html <label><input type="checkbox" name="afa2"><span></span></label> <label><input type="radio" name="afa47"><span></span></label> ~~~ Man könnte den Span auch weglassen und im JavaScript Text anhängen. Ein Span schafft aber einen klarer definierten Platzhalter für den Text. Mit einer Prise JavaScript setzt man die Texte ein: ~~~js for (let materialElement of materialWähler()) { materialElement.element .closest("label") .querySelector("span").textContent = materialElement.material.label; } function* materialWähler(checkedOnly = false) { let selektor = "label > input[name]"; if (checkedOnly) selektor += ":checked"; for (let element of document.querySelectorAll(selektor)) { let material; if (element.type == "checkbox") material = materialListe[element.name]; else if (element.type == "radio") material = materialListe[element.value]; if (material) yield { element, material }; } } ~~~ materialWähler ist als `function*` definiert, das ist eine [Generator-Funktion](https://wiki.selfhtml.org/wiki/JavaScript/Iterator). Ein Generator kann in einer Schleife eine Liste von Werten zurückgeben, die zum Beispiel in einer (for...of) Schleife verarbeitet werden können. Generatoren sind ungemein praktisch, um Erzeugung und Verarbeitung einer Liste von Werten sauber zu trennen, ohne die Liste dafür zwischenspeichern zu müssen. Mehr dazu im verlinkten Wiki-Artikel. `materialWähler` baut zunächst einen CSS Selektor für die gesuchten Input-Elemente auf. Das ist zunächst "label > input[name]", also alle input-Elemente mit einem name-Attribut, die ein label als Elternelement haben. Wird der Funktion `true` übergeben, wird noch ein :checked hinzugefügt, d.h. nur die Checkboxen oder Radiobuttons ausgewählt, die angehakt sind. Dadurch kannst Du die Funktion wahlweise für alle Inputs oder nur für die gerade ausgewählten Inputs verwenden. Anhand des erzeugten CSS Selectors sucht `materialWähler` mittels `querySelectorAll` die Input-Elemente heraus. Die Zuordnung zum Material unterscheidet sich bei Checkbox und Radiobuttons, weil in einer Gruppe Radiobuttons alle inputs den gleichen Namen haben. Darum wird für Checkboxen über name gesucht und für Radiobuttons über value. Ist es keins von beiden, bleibt material leer. Wurde ein Material zum input Element gefunden, wird ein kleines Objekt aufgebaut, das Element und Material enthält, und per yield bereitgestellt. Die for...of Schleife im Hauptprogramm durchläuft die vom Generator bereitgestellten Ergebnisse. Jeder Treffer ist ein Pärchen aus Element und Materialdefinition, und nun muss nur noch das span-Element gesucht werden und der Label-Text eingetragen werden. Dafür wird zunächst mit closest zum Label navigiert und von dort mit querySelector zum span. Später, wenn der "Dokumentation generieren" Button geklickt wird, rufst Du `materialWähler(true)` auf, gehst die Ergebnisse ebenfalls mit for...of durch und baust die Inhalte der text-Eingeschaft aus der Materialliste zusammen. Hier das Ganze in einem Fiddle: <https://jsfiddle.net/Rolf_b/qb5dtysc/> _Rolf_ -- sumpsi - posui - obstruxi

Hallo Joachim, wenn Du auf zentrale Wartung Wert legst, dann solltest Du vielleicht noch etwas länger nachdenken, bevor Du loslegst. Du hast - wie es scheint - für jedes Material den Text, der zum Button / zur Checkbox gehört, und du hast den Text, der in der Doku erscheinen soll. Diese Texte sind nicht die Gleichen, wenn ich mir dein Beispiel zu Anfang anschaue. Im schlimmsten Fall hast Du pro Checkbox 3 Werte: Eine ID, eine Checkbox-Beschriftung und einen Dokumentationseintrag. Wenn ich dein Eingangsbeispiel anschaue, wäre eine solche Dreiergruppe zum Beispiel "afa2", "flow 2" und "flow a2 lot: 12345". Oder "afa35", "flow a3,5 lot: 34567". So etwas kann man in einem Objekt speichern: ~~~js const materialListe = { "afa2": { label: "flow 2", text: "flow a2, lot: 12345" }, "afa3": { label: "flow 3", text: "flow a3, lot: 23456" }, "afa35": { label: "flow 3,5", text: "flow a3,5, lot: 34567" }, // und so weiter }; ~~~ Wenn Du deine Checkboxen (oder Radiobuttons) nach einem einheitlichen Schema im HTML aufbaust, zum Beispiel so: ~~~html <label><input type="checkbox" name="afa2"></label> <label><input type="radio" name="afa47"></label> ~~~ dann kann man dafür sorgen, dass die Anzeigetexte aus dem Materialienobjekt automagisch eingesteuert werden. Dazu entfernt man die Texte aus dem HTML und setzt einen leeren span an ihre Stelle: ~~~html <label><input type="checkbox" name="afa2"><span></span></label> <label><input type="radio" name="afa47"><span></span></label> ~~~ Man könnte den Span auch weglassen und im JavaScript Text anhängen. Ein Span schafft aber einen klarer definierten Platzhalter für den Text. Mit einer Prise JavaScript setzt man die Texte ein: ~~~js for (let materialElement of materialWähler()) { materialElement.element .closest("label") .querySelector("span").textContent = materialElement.material.label; } function* materialWähler(checkedOnly = false) { let selektor = "label > input[name]"; if (checkedOnly) selektor += ":checked"; for (let element of document.querySelectorAll(selektor)) { let material; if (element.type == "checkbox") material = materialListe[element.name]; else if (element.type == "radio") material = materialListe[element.value]; if (material) yield { element, material }; } } ~~~ materialWähler ist als `function*` definiert, das ist eine [Generator-Funktion](https://wiki.selfhtml.org/wiki/JavaScript/Iterator). Ein Generator kann in einer Schleife eine Liste von Werten zurückgeben, die zum Beispiel in einer (for...of) Schleife verarbeitet werden können. Generatoren sind ungemein praktisch, um Erzeugung und Verarbeitung einer Liste von Werten sauber zu trennen, ohne die Liste dafür zwischenspeichern zu müssen. Mehr dazu im verlinkten Wiki-Artikel. `materialWähler` baut zunächst einen CSS Selektor für die gesuchten Input-Elemente auf. Das ist zunächst "label > input[name]", also alle input-Elemente mit einem name-Attribut, die ein label als Elternelement haben. Wird der Funktion `true` übergeben, wird noch ein :checked hinzugefügt, d.h. nur die Checkboxen oder Radiobuttons ausgewählt, die angehakt sind. Dadurch kannst Du die Funktion wahlweise für alle Inputs oder nur für die gerade ausgewählten Inputs verwenden. Anhand des erzeugten CSS Selectors sucht `materialWähler` mittels `querySelectorAll` die Input-Elemente heraus. Die Zuordnung zum Material unterscheidet sich bei Checkbox und Radiobuttons, weil in einer Gruppe Radiobuttons alle inputs den gleichen Namen haben. Darum wird für Checkboxen über name gesucht und für Radiobuttons über value. Ist es keins von beiden, bleibt material leer. Wurde ein Material zum input Element gefunden, wird ein kleines Objekt aufgebaut, das Element und Material enthält, und per yield bereitgestellt. Die for...of Schleife im Hauptprogramm durchläuft die vom Generator bereitgestellten Ergebnisse. Jeder Treffer ist ein Pärchen aus Element und Materialdefinition, und nun muss nur noch das span-Element gesucht werden und der Label-Text eingetragen werden. Dafür wird zunächst mit closest zum Label navigiert und von dort mit querySelector zum span. Später, wenn der "Dokumentation generieren" Button geklickt wird, rufst Du `materialWähler(true)` auf, gehst die Ergebnisse ebenfalls mit for...of durch und baust die Inhalte der text-Eingeschaft aus der Materialliste zusammen. _Rolf_ -- sumpsi - posui - obstruxi

Hallo Joachim, wenn Du auf zentrale Wartung Wert legst, dann solltest Du vielleicht noch etwas länger nachdenken, bevor Du loslegst. Du hast - wie es scheint - für jedes Material den Text, der zum Button / zur Checkbox gehört, und du hast den Text, der in der Doku erscheinen soll. Diese Texte sind nicht die Gleichen, wenn ich mir dein Beispiel zu Anfang anschaue. Im schlimmsten Fall hast Du pro Checkbox 3 Werte: Eine ID, eine Checkbox-Beschriftung und einen Dokumentationseintrag. Wenn ich dein Eingangsbeispiel anschaue, wäre eine solche Dreiergruppe zum Beispiel "afa2", "flow 2" und "flow a2 lot: 12345". Oder "afa35", "flow a3,5 lot: 34567". So etwas kann man in einem Objekt speichern: ~~~js const materialListe = { "afa2": { label: "flow 2", text: "flow a2, lot: 12345" }, "afa3": { label: "flow 3", text: "flow a3, lot: 23456" }, "afa35": { label: "flow 3,5", text: "flow a3,5, lot: 34567" }, // und so weiter }; ~~~ Wenn Du deine Checkboxen (oder Radiobuttons) nach einem einheitlichen Schema im HTML aufbaust, zum Beispiel so: ~~~html <label><input type="checkbox" name="afa2"></label> <label><input type="radio" name="afa47"></label> ~~~ dann kann man dafür sorgen, dass die Anzeigetexte aus dem Materialienobjekt automagisch eingesteuert werden. Dazu entfernt man die Texte aus dem HTML und setzt einen leeren span an ihre Stelle: ~~~html <label><input type="checkbox" name="afa2"><span></span></label> <label><input type="radio" name="afa47"><span></span></label> ~~~ Man könnte den Span auch weglassen und im JavaScript Text anhängen. Ein Span schafft aber einen klarer definierten Platzhalter für den Text. Mit einer Prise JavaScript setzt man die Texte ein: ~~~js for (let materialElement of materialWähler()) { materialElement.element .closest("label") .querySelector("span").textContent = materialElement.material.label; } function* materialWähler(checkedOnly = false) { let selektor = "label > input[name]"; if (checkedOnly) selektor += ":checked"; for (let eingabeElement of document.querySelectorAll(selektor) ) { if (eingabeElement.type != "checkbox" && eingabeElement.type != "radio") continue; if (!eingabeElement.name) continue; let material = materialListe[eingabeElement.name]; if (material) yield { element: eingabeElement, material: material }; } } ~~~ materialWähler ist als `function*` definiert, das ist eine [Generator-Funktion](https://wiki.selfhtml.org/wiki/JavaScript/Iterator). Ein Generator kann in einer Schleife eine Liste von Werten zurückgeben, die zum Beispiel in einer (for...of) Schleife verarbeitet werden können. Mehr dazu im verlinkten Wiki-Artikel. `materialWähler` baut zunächst einen CSS Selektor für die gesuchten Input-Elemente auf. Das ist zunächst "label > input[name]", also alle input-Elemente mit einem name-Attribut, die ein label als Elternelement haben. Wird der Funktion `true` übergeben, wird noch ein :checked hinzugefügt, d.h. nur die Checkboxen oder Radiobuttons ausgewählt, die angehakt sind. Dadurch kannst Du die Funktion wahlweise für alle Inputs oder nur für die gerade ausgewählten Inputs verwenden. Anhand des erzeugten CSS Selectors sucht `materialWähler` mittels `querySelectorAll` die gewünschten Input-Elemente heraus. name-Attribut enthalten. Die Fundstücke filtert sie auf die Typen Checkbox und Radiobutton, und prüft, ob in `name` auch etwas drinsteht. Danach wird geschaut, ob es in der Materialliste zum name des Input-Element einen Eintrag gibt. Wenn ja, wird ein kleines Objekt aufgebaut, das Element und Material enthält, und zurückgegeben. Es gibt auch andere Möglichkeiten, das zu lösen und die Filterung komplett mit querySelectorAll zu erledigen, aber dafür wird der Selektor komplizierter. Ich glaube, dass es so am leichtesten zu verstehen ist. Die for...of Schleife im Hauptprogramm durchläuft die vom Generator erzeugte Liste von Treffern. Jeder Treffer ist ein Pärchen aus Element und Materialdefinition, und nun muss nur noch das span-Element gesucht werden und der Label-Text eingetragen werden. Dafür wird zunächst mit closest zum Label navigiert und von dort mit querySelector zum span. Später, wenn der "Dokumentation generieren" Button geklickt wird, rufst Du `materialWähler(true)` auf, gehst die Ergebnisse ebenfalls mit for...of durch und baust die Inhalte der text-Eingeschaft aus der Materialliste zusammen. _Rolf_ -- sumpsi - posui - obstruxi

Hallo Joachim, wenn Du auf zentrale Wartung Wert legst, dann solltest Du vielleicht noch etwas länger nachdenken, bevor Du loslegst. Du hast - wie es scheint - für jedes Material den Text, der zum Button / zur Checkbox gehört, und du hast den Text, der in der Doku erscheinen soll. Diese Texte sind nicht die Gleichen, wenn ich mir dein Beispiel zu Anfang anschaue. Im schlimmsten Fall hast Du pro Checkbox 3 Werte: Eine ID, eine Checkbox-Beschriftung und einen Dokumentationseintrag. Wenn ich dein Eingangsbeispiel anschaue, wäre eine solche Dreiergruppe zum Beispiel "afa2", "flow 2" und "flow a2 lot: 12345". Oder "afa35", "flow a3,5 lot: 34567". So etwas kann man in einem Objekt speichern: ~~~js const materialListe = { "afa2": { label: "flow 2", text: "flow a2, lot: 12345" }, "afa3": { label: "flow 3", text: "flow a3, lot: 23456" }, "afa35": { label: "flow 3,5", text: "flow a3,5, lot: 34567" }, // und so weiter }; ~~~ Wenn Du deine Checkboxen (oder Radiobuttons) nach einem einheitlichen Schema im HTML aufbaust, zum Beispiel so: ~~~html <label><input type="checkbox" name="afa2"></label> <label><input type="radio" name="afa47"></label> ~~~ dann kann man dafür sorgen, dass die Anzeigetexte aus dem Materialienobjekt automagisch eingesteuert werden. Dazu entfernt man die Texte aus dem HTML und setzt einen leeren span an ihre Stelle: ~~~html <label><input type="checkbox" name="afa2"><span></span></label> <label><input type="radio" name="afa47"><span></span></label> ~~~ Man könnte den Span auch weglassen und im JavaScript Text anhängen. Ein Span schafft aber einen klarer definierten Platzhalter für den Text. Mit einer Prise JavaScript setzt man die Texte ein: ~~~js for (let materialElement of materialWähler()) { materialElement.element .closest("label") .querySelector("span").textContent = materialElement.element; } function* materialWähler(checkedOnly = false) { let selektor = "label > input[name]"; if (checkedOnly) selektor += ":checked"; for (let eingabeElement of document.querySelectorAll(selektor) ) { if (eingabeElement.type != "checkbox" && eingabeElement.type != "radio") continue; if (!eingabeElement.name) continue; let material = materialListe[eingabeElement.name]; if (material) { yield { element: eingabeElement, material: material }; } } ~~~ materialWähler ist als `function*` definiert, das ist eine [Generator-Funktion](https://wiki.selfhtml.org/wiki/JavaScript/Iterator). Ein Generator kann in einer Schleife eine Liste von Werten zurückgeben, die zum Beispiel in einer (for...of) Schleife verarbeitet werden können. Mehr dazu im verlinkten Wiki-Artikel. `materialWähler` baut zunächst einen CSS Selektor für die gesuchten Input-Elemente auf. Das ist zunächst "label > input[name]", also alle input-Elemente mit einem name-Attribut, die ein label als Elternelement haben. Wird der Funktion `true` übergeben, wird noch ein :checked hinzugefügt, d.h. nur die Checkboxen oder Radiobuttons ausgewählt, die angehakt sind. Dadurch kannst Du die Funktion wahlweise für alle Inputs oder nur für die gerade ausgewählten Inputs verwenden. Anhand des erzeugten CSS Selectors sucht `materialWähler` mittels `querySelectorAll` die gewünschten Input-Elemente heraus. name-Attribut enthalten. Die Fundstücke filtert sie auf die Typen Checkbox und Radiobutton, und prüft, ob in `name` auch etwas drinsteht. Danach wird geschaut, ob es in der Materialliste zum name des Input-Element einen Eintrag gibt. Wenn ja, wird ein kleines Objekt aufgebaut, das Element und Material enthält, und zurückgegeben. Es gibt auch andere Möglichkeiten, das zu lösen und die Filterung komplett mit querySelectorAll zu erledigen, aber dafür wird der Selektor komplizierter. Ich glaube, dass es so am leichtesten zu verstehen ist. Die for...of Schleife im Hauptprogramm durchläuft die vom Generator erzeugte Liste von Treffern. Jeder Treffer ist ein Pärchen aus Element und Materialdefinition, und nun muss nur noch das span-Element gesucht werden und der Label-Text eingetragen werden. Dafür wird zunächst mit closest zum Label navigiert und von dort mit querySelector zum span. Später, wenn der "Dokumentation generieren" Button geklickt wird, rufst Du `materialWähler(true)` auf, gehst die Ergebnisse ebenfalls mit for...of durch und baust die Inhalte der text-Eingeschaft aus der Materialliste zusammen. _Rolf_ -- sumpsi - posui - obstruxi

Hallo Joachim, wenn Du auf zentrale Wartung Wert legst, dann solltest Du vielleicht noch etwas länger nachdenken, bevor Du loslegst. Du hast - wie es scheint - für jedes Material den Text, der zum Button / zur Checkbox gehört, und du hast den Text, der in der Doku erscheinen soll. Diese Texte sind nicht die Gleichen, wenn ich mir dein Beispiel zu Anfang anschaue. Im schlimmsten Fall hast Du pro Checkbox 3 Werte: Eine ID, eine Checkbox-Beschriftung und einen Dokumentationseintrag. Wenn ich dein Eingangsbeispiel anschaue, wäre eine solche Dreiergruppe zum Beispiel "afa2", "flow 2" und "flow a2 lot: 12345". Oder "afa35", "flow a3,5 lot: 34567". So etwas kann man in einem Objekt speichern: ~~~js const materialListe = { "afa2": { label: "flow 2", text: "flow a2, lot: 12345" }, "afa3": { label: "flow 3", text: "flow a3, lot: 23456" }, "afa35": { label: "flow 3,5", text: "flow a3,5, lot: 34567" }, // und so weiter }; ~~~ Wenn Du deine Checkboxen (oder Radiobuttons) nach einem einheitlichen Schema im HTML aufbaust, zum Beispiel so: ~~~html <label><input type="checkbox" name="afa2"></label> <label><input type="radio" name="afa47"></label> ~~~ dann kann man dafür sorgen, dass die Anzeigetexte aus dem Materialienobjekt automagisch eingesteuert werden. Dazu entfernt man die Texte aus dem HTML und setzt einen leeren span an ihre Stelle: ~~~html <label><input type="checkbox" name="afa2"><span></span></label> <label><input type="radio" name="afa47"><span></span></label> ~~~ Man könnte den Span auch weglassen und im JavaScript Text anhängen. Ein Span schafft aber einen klarer definierten Platzhalter für den Text. Mit einer Prise JavaScript setzt man die Texte ein: ~~~js for (let eingabeElement of materialWähler()) { let material = materialListe[eingabeElement.name]; if (material) { eingabeElement .closest("label") .querySelector("span").textContent = material.label; } } function* materialWähler(nurAusgewählte = false) { let selektor = "label > input[name]"; if (checkedOnly) selektor += ":checked"; for (let eingabeElement of document.querySelectorAll(selektor) ) { if (eingabeElement.type != "checkbox" && eingabeElement.type != "radio") continue; if (!eingabeElement.name) continue; yield eingabeElement; } } ~~~ materialWähler ist als `function*` definiert, das ist eine [Generator-Funktion](https://wiki.selfhtml.org/wiki/JavaScript/Iterator). Ein Generator kann in einer Schleife eine Liste von Werten zurückgeben, die zum Beispiel in einer (for...of) Schleife verarbeitet werden können. Mehr dazu im verlinkten Wiki-Artikel. `materialWähler` baut zunächst einen CSS Selektor für die gesuchten Input-Elemente auf. Das ist zunächst "label > input[name]", also alle input-Elemente mit einem name-Attribut, die ein label als Elternelement haben. Wird der Funktion `true` übergeben, wird noch ein :checked hinzugefügt, d.h. nur die Checkboxen oder Radiobuttons ausgewählt, die angehakt sind. Dadurch kannst Du die Funktion wahlweise für alle Inputs oder nur für die gerade ausgewählten Inputs verwenden. Anhand des erzeugten CSS Selectors sucht `materialWähler` mittels `querySelectorAll` die gewünschten Input-Elemente heraus. name-Attribut enthalten. Die Fundstücke filtert sie auf die Typen Checkbox und Radiobutton, und prüft, ob in `name` auch etwas drinsteht. Was der Filter durchlässt, wird mit yield bereitgestellt. Es gibt auch andere Möglichkeiten, das zu lösen und die Filterung komplett mit querySelectorAll zu erledigen, aber dafür wird der Selektor komplizierter. Ich glaube, dass es so am leichtesten zu verstehen ist. Die for...of Schleife im Hauptprogramm durchläuft die vom Generator erzeugte Liste von input Elementen. Pro Element wird - an Hand des Namens die Materialdefinition geholt. Nur wenn eine da ist, geht es weiter. - das label-Elternelement gesucht (closest) - darin das span-Element gesucht - im Span der Wert von `label` aus der Materialdefinition eingetragen Später, wenn der "Dokumentation generieren" Button geklickt wird, rufst Du `materialWähler(true)` auf, gehst die Ergebnisse ebenfalls mit for...of durch und baust die Inhalte der text-Eingeschaft aus der Materialliste zusammen. _Rolf_ -- sumpsi - posui - obstruxi