@@Enrico > ~~~js > var w, > x = kategorien.length; > ~~~ `w`{:.language-js} brauchst du an der Stelle nicht, sondern nur in der Funktion `aufrufen()`{:.language-js}. Die Variable sollte demzufolge in der Funktion lokal deklariert werden. > ~~~js > function aufrufen (nr) > { > w = 0; > > for (; w < x; w++) > ~~~ Seltsame Schreibweise. Üblich ist ~~~js function aufrufen(nr) { for (var w = 0; w < x; w++) ~~~ oder wenn du die Variable vorher deklarieren willst: ~~~js function aufrufen(nr) { var w; for (w = 0; w < x; w++) ~~~ In modernen Browsern mit dem Schlüsselwort `let`{:.language-js} statt `var`{:.language-js}. > ~~~js > document.getElementById("liste" + kategorien[w][0].toUpperCase() + kategorien[w].substring(1)) > ~~~ Kannst du deine IDs statt in CamelCase nicht mit Bindestrich benennen? `<tbody id="liste-heute">`{:.language-html} usw.? Dann kannst du dir den ganzen umständlichen Kram sparen und hast einfach ~~~js document.getElementById("liste-" + kategorien[w]) ~~~ > Ich verstecke zuerst alle tbodies aus ("display: none") und möchte nur den anzuzeigenden tbody sichtbar machen ("display: block"). Warum das denn? Durch die Schleife gehen und abfragen, ob der aktuelle Schleifenindex `w`{:.language-js} gleich `nr`{:.language-js} ist. Wenn ja, auf `"block"` setzen, andernfalls auf `""` (siehe [andere Antwort](https://forum.selfhtml.org/self/2017/nov/28/wechsel-von-display-none-nach-display-block-zerstoert-tabellen-layout/1709353#m1709353)): ~~~JavaScript, bad function aufrufen(nr) { for (var w = 0; w < x; w++) { if (w == nr) { document.getElementById("liste-" + kategorien[w]).style.display = "block"; } else { document.getElementById("liste-" + kategorien[w]).style.display = ""; } } } ~~~ oder kurz ~~~JavaScript, bad function aufrufen(nr) { for (var w = 0; w < x; w++) { document.getElementById("liste-" + kategorien[w]).style.display = (w == nr) ? "block" : ""; } } ~~~ --- > Was mache ich falsch? ~~~JavaScript, bad .style.display = "none" ~~~ Ich krame mal wieder [den Cheatah](https://forum.selfhtml.org/cites/1711) raus: *„Was hingegen schwer ist, ist in die Köpfe der Menschen zu bringen, dass Layout-Informationen **in den CSS-Code** gehören, **nicht** in den JavaScript-Code. JavaScript ist wunderbar geeignet, die DOM-Objekte auf eine Weise zu verändern, die in CSS genutzt werden kann.“* Nun könnte jemand sagen: Das Anzeigen/Nicht-Anzeigen wäre keine „Layout-Information“. Dann hat das erst recht nichts im `style`-Objekt zu suchen. Zum Nicht-Anzeigen gibt es das [HTML-Attribut `hidden`](https://w3c.github.io/html/editing.html#the-hidden-attribute). Dieses ist hier zu verwenden: ~~~JavaScript function aufrufen(nr) { for (var w = 0; w < x; w++) { if (w == nr) { document.getElementById("liste-" + kategorien[w]).removeAttribute("hidden"); } else { document.getElementById("liste-" + kategorien[w]).setAttribute("hidden", ""); } } } ~~~ Dann wäre das Problem mit dem flaschen Wert für die `display`-Eigenschaft gar nicht erst aufgetaucht. LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@Enrico > ~~~js > var w, > x = kategorien.length; > ~~~ `w`{:.language-js} brauchst du an der Stelle nicht, sondern nur in der Funktion `aufrufen()`{:.language-js}. Die Variable sollte demzufolge in der Funktion lokal deklariert werden. > ~~~js > function aufrufen (nr) > { > w = 0; > > for (; w < x; w++) > ~~~ Seltsame Schreibweise. Üblich ist ~~~js function aufrufen(nr) { for (var w = 0; w < x; w++) ~~~ oder wenn du die Variable vorher deklarieren willst: ~~~js function aufrufen(nr) { var w; for (w = 0; w < x; w++) ~~~ In modernen Browsern mit dem Schlüsselwort `let`{:.language-js} statt `var`{:.language-js}. > ~~~js > document.getElementById("liste" + kategorien[w][0].toUpperCase() + kategorien[w].substring(1)) > ~~~ Kannst du deine IDs statt in CamelCase nicht mit Bindestrich benennen? `<tbody id="liste-heute">`{:.language-html} usw.? Dann kannst du dir den ganzen umständlichen Kram sparen und hast einfach ~~~js document.getElementById("liste-" + kategorien[w]) ~~~ > Ich verstecke zuerst alle tbodies aus ("display: none") und möchte nur den anzuzeigenden tbody sichtbar machen ("display: block"). Warum das denn? Durch die Schleife gehen und abfragen, ob der aktuelle Schleifenindes `w`{:.language-js} gleich `nr`{:.language-js} ist. Wenn ja, auf `"block"` setzen, andernfalls auf `""` (siehe [andere Antwort](https://forum.selfhtml.org/self/2017/nov/28/wechsel-von-display-none-nach-display-block-zerstoert-tabellen-layout/1709353#m1709353)): ~~~JavaScript, bad function aufrufen(nr) { for (var w = 0; w < x; w++) { if (w == nr) { document.getElementById("liste-" + kategorien[w]).style.display = "block"; } else { document.getElementById("liste-" + kategorien[w]).style.display = ""; } } } ~~~ oder kurz ~~~JavaScript, bad function aufrufen(nr) { for (var w = 0; w < x; w++) { document.getElementById("liste-" + kategorien[w]).style.display = (w == nr) ? "block" : ""; } } ~~~ --- > Was mache ich falsch? ~~~JavaScript, bad .style.display = "none" ~~~ Ich krame mal wieder [den Cheatah](https://forum.selfhtml.org/cites/1711) raus: *„Was hingegen schwer ist, ist in die Köpfe der Menschen zu bringen, dass Layout-Informationen **in den CSS-Code** gehören, **nicht** in den JavaScript-Code. JavaScript ist wunderbar geeignet, die DOM-Objekte auf eine Weise zu verändern, die in CSS genutzt werden kann.“* Nun könnte jemand sagen: Das Anzeigen/Nicht-Anzeigen wäre keine „Layout-Information“. Dann hat das erst recht nichts im `style`-Objekt zu suchen. Zum Nicht-Anzeigen gibt es ein [HTML-Attribut: `hidden`](https://w3c.github.io/html/editing.html#the-hidden-attribute). Dieses ist hier zu verwenden: ~~~JavaScript function aufrufen(nr) { for (var w = 0; w < x; w++) { if (w == nr) { document.getElementById("liste-" + kategorien[w]).removeAttribute("hidden"); } else { document.getElementById("liste-" + kategorien[w]).setAttribute("hidden", ""); } } } ~~~ Dann wäre das Problem mit dem flaschen Wert für die `display`-Eigenschaft gar nicht erst aufgetaucht. LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)