Javascript-Problem

[Friedel]

Hallo, ich habe mich lange Zeit nicht mit DOM-Manipulationen befasst und komme im Moment nicht weiter. Ich hoffe, mir kann jemand helfen.

In einer Seite, die mit Php generiert wird, soll clientseitig einiges verändert werden. Es geht um eine Liste <ul> mit vielen <li>, die teilweise wiederum <ul> enthalten.

Jedes <li> ist nach folgendem Schema aufgebaut: <li>, 1 bis 5 Bilder mit class="ex_bild", genau 1 Bild mit class="listicon", ein kurzer Text

Dann gibt es 2 Möglichkeiten. Entweder endet das <li> mit </li>, oder es folgt ein Zeilenumbruch im Quellcode (also nicht in der Browserausgabe - kein <br>) und es folgt eine <ul>, die wieder mindestens 1 <li> enthält, das nach diesem Schema aufgebaut ist. Nach dieser <ul> flogt dann wieder ein Zeilenumbruch im Quellcode und dann das </li>.

Ein Beispiel:

<ul>
  <li><img src="Bild_5.gif" alt="" class="listicon">Text 1
    <ul>
      <li><img src="Bild_1.gif" alt="" class="ex_bild"><img src="Bild_2.gif" alt="" class="listicon">Text 2</li>
      <li><img src="Bild_1.gif" alt="" class="ex_bild"><img src="Bild_2.gif" alt="" class="listicon">Text 3</li>
      <li><img src="Bild_1.gif" alt="" class="ex_bild"><img src="Bild_3.gif" alt="" class="listicon">Text 4</li>
      <li><img src="Bild_4.gif" alt="" class="ex_bild"><img src="Bild_5.gif" alt="" class="listicon">Text 5</a>
        <ul>
          <li><img src="Bild_6.gif" alt="" class="ex_bild"><img src="Bild_1.gif" alt="" class="ex_bild"><img src="Bild_2.gif" alt="" class="listicon">Text 6</li>
          <li><img src="Bild_6.gif" alt="" class="ex_bild"><img src="Bild_1.gif" alt="" class="ex_bild"><img src="Bild_2.gif" alt="" class="listicon">Text 7</li>
          <li><img src="Bild_6.gif" alt="" class="ex_bild"><img src="Bild_1.gif" alt="" class="ex_bild"><img src="Bild_2.gif" alt="" class="listicon">Text 8</li>
        </ul>
  </li>
</ul>

(Ich hoffe, der Quellcode sieht im Beitrag nicht so aus wie die Vorschau, sondern so, wie laut Beschreibung aussehen sollte.)

Folgende Veränderungen sollen durch das Script erreicht werden: In jedem <li>, das eine <ul> enthält, sollen alle Bilder und der Text in > <a href="javascript:ordnerlink('o1')"></a> eingeschlossen werden, wobei die 1 von 'o1' durch eine fortlaufende Nummer ersetzt werden soll. Und das enthaltene <ul> soll zu <ul id="o1"> erweitert werden.

[Gunnar Bittersmann]

@@Friedel

Ich hoffe, der Quellcode sieht im Beitrag nicht so aus wie die Vorschau

Doch, das sah er. Ich hab das mal gefixt.

Block-Quellcode braucht eine Leerzeile drüber und drunter.

LLAP 🖖

[Friedel]

Danke. Das mit den Leerzeilen wird im Wiki zwar erwähnt, wird dann aber mit einem Beispiel ohne Leerzeilen illustriert. Ich glaube, das sollte ich morgen ändern.

[Matthias Apsel]

Hallo Friedel,

Danke. Das mit den Leerzeilen wird im Wiki zwar erwähnt, wird dann aber mit einem Beispiel ohne Leerzeilen illustriert. Ich glaube, das sollte ich morgen ändern.

☑️ done.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Friedel

sollen alle Bilder und der Text in > <a href="javascript:ordnerlink('o1')"></a> eingeschlossen werden

Was tut die Funktion ordnerlink()?

<a href="javascript:…"> ist i.A. ein sicheres Zeichen dafür, dass das a-Element falsch ist und stattdessen ein button verwendet werden sollte.

LLAP 🖖

[Friedel]

Stimmt, da könnte man wirklich einen Button nehmen. Alle anderen <li>, die keine <ul> enthalten, bekommen an der Stelle einen Link nach dem Schema <a href="./Pfad/Seite.php"><img src="Bild_x.gif" alt="" class="ex_bild"><img src="Bild_y.gif" alt="" class="listicon">Text</a>. Diese Links werden aber nicht durch ein Javascript erzeugt, sondern im Php generiert.

Die Funktion ordnerlink() sieht so aus:

function ordnerlink(a) {
  if (document.getElementById(a).className=="zu") {
    document.getElementById(a).className="offen";
  } else {
    document.getElementById(a).className="zu";
  };
};

Es spricht nichts dagegen, hier einen Button zu nehmen. Allerdings ändert das nichts an meinem Problem. Wenn ich es schaffe, die Links zu erzeugen, schaffe ich das wohl auch mit den Buttons (und umgekehrt).

[Gunnar Bittersmann]

@@Friedel

Stimmt, da könnte man wirklich einen Button nehmen. Alle anderen <li>, die keine <ul> enthalten, bekommen an der Stelle einen Link nach dem Schema <a href="./Pfad/Seite.php"><img src="Bild_x.gif" alt="" class="ex_bild"><img src="Bild_y.gif" alt="" class="listicon">Text</a>. Diese Links werden aber nicht durch ein Javascript erzeugt, sondern im Php generiert.

Wenn du schon serverseitig die Unterscheidung triffst, warum lässt du dann nicht auch die Buttons per PHP generieren?

Die Funktion ordnerlink() sieht so aus:

function ordnerlink(a) {
  if (document.getElementById(a).className=="zu") {
    document.getElementById(a).className="offen";
  } else {
    document.getElementById(a).className="zu";
  };
};

Es ist i.A. keine gute Idee, eine Klasse per className zu setzen oder zu entfernen; eine andere möglicherweise vorhandene Klasse wird damit mit überschrieben.

Dafür nimmt man besser die Methoden der classList-Eigenschaft: add(), remove() – und kucke mal – da gibt’s auch toggle(). Da mit sähe deine Funktion so aus:

function ordnerlink(a) {
	document.getElementById(a).class('offen');
}

d.h. eigentlich brauchst du den Einzeiler gar nicht extra in einer Funktion zu kapseln.

Eine Klasse „zu“ brauchst du auch nicht; die Abwesenheit der Klasse „offen“ gibt den Zustand „zu“ an. (Oder andersrum: die Abwesenheit der Klasse „zu“ gibt den Zustand „offen“ an; dann brauchst du keine Klasse „offen“.)

Doch eine Klasse „offen“ (bzw. „zu“) brauchst du auch nicht – der Zustand sollte nämlich schon beim Button vermerkt sein: in dessen aria-expanded-Attribut, siehe Inclusive components: Toggle Buttons; s.a. Menus & Menu Buttons.

Die Listen blendet man über den Geschwisterselektor aus:

button[aria-expanded="false"] + ul { display: none }

So in der Art ist es auch bei diesem resonsiven Menü auf schmalen Viewports zu sehen.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Doch eine Klasse „offen“ (bzw. „zu“) brauchst du auch nicht – der Zustand sollte nämlich schon beim Button vermerkt sein: in dessen aria-expanded-Attribut

Und wenn die Zustände „offen“ und „zu“ doch direkt bei dem jeweiligen ul-Element angegeben werden sollen, braucht man trotzdem keine Klassen – das geht mit dem hidden-Attribut, das gesetzt bzw. nicht gesetzt wird.

siehe Inclusive components: Toggle Buttons

Oops, darin kommt aria-expanded gar nicht vor.

s.a. Menus & Menu Buttons.

Da aber.

LLAP 🖖

[Friedel]

Wenn du schon serverseitig die Unterscheidung triffst, warum lässt du dann nicht auch die Buttons per PHP generieren?

Das würde die Sache wirklich sehr viel einfacher machen. Tatsächlich habe ich mehrfach erwogen, das zu machen. Aber das wäre ein fauler Kompromiss bzw. eine Notlösung. Mit Php generiere ich eine semantisch korrekte Seite. Sie enthält alle notwendigen Funktionen. Diese Seite wird von Suchmaschinen, Blindenbrowsern, Textbrowsern, Screenreadern und Javasript-Verweigerern auch so gebraucht. Mit Javascript ergänze ich noch einige Funktionen für mehr Komfort. Buttons, die nur in Komfort-Variante einen Zweck haben, sollten auch nur dort existieren.

Es ist i.A. keine gute Idee, eine Klasse per className zu setzen oder zu entfernen; eine andere möglicherweise vorhandene Klasse wird damit mit überschrieben.

Das ist auch Sinn der Sache. Es gibt 4 mögliche Zustände: kein class-Attribut, class="offen", class="zu" und class="hi". Beim Anklicken des Buttons bzw. Links soll folgendes passieren: Wenn es vorher class="zu" war, soll es danach class="offen" sein. In allen anderen Fällen soll es danach class="zu" sein. Außerdem möchte ich Sachen, die nur in manchen Browsern funktionieren, nach Möglichkeit nicht verwenden. Im Internet Explorer funktioniert das laut https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/classList erst ab Version 10.

Das aria-expanded-Attribut kannte ich bisher nicht. Und in selfhtml steht dazu auch wenig brauchbares. Die von dir verlinkte Seite habe ich gleich wieder zu gemacht. Wenn mich mein Pc-Lautsprecher ungefragt anbrüllt, nachdem ich eine Seite öffne, mache ich sie wieder zu und besuche sie nicht wieder. Außerdem lerne ich neue Sachen sehr viel leichter, wenn ich sie auf Deutsch erklärt bekomme. Auch das hidden-Attribut kenne ich nicht, aber laut https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute/hidden funktioniert es erst ab IE11. Dort habe ich zwar einiges darüber gelesen, wie es funktioniert (wenn es funktioniert), aber nicht was daran besser sein soll, als display:none;. Jedenfalls habe ich nicht vor, Workarrounds für die weit verbreiteten Browser ie7 bis ie10 zu bauen.

[Matthias Apsel]

Hallo Friedel,

Jedenfalls habe ich nicht vor, Workarrounds für die weit verbreiteten Browser ie7 bis ie10 zu bauen.

In Deutschland ist neben dem edge lediglich der IE11 relevant. https://clicky.com/marketshare/de/web-browsers/internet-explorer/, https://clicky.com/marketshare/de/web-browsers/microsoft-edge/

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Friedel

Wenn du schon serverseitig die Unterscheidung triffst, warum lässt du dann nicht auch die Buttons per PHP generieren? Das würde die Sache wirklich sehr viel einfacher machen. Tatsächlich habe ich mehrfach erwogen, das zu machen. Aber das wäre ein fauler Kompromiss bzw. eine Notlösung. Mit Php generiere ich eine semantisch korrekte Seite. Sie enthält alle notwendigen Funktionen.

Die Grundlage für progressive enhancement. \o/

Diese Seite wird von Suchmaschinen, Blindenbrowsern, Textbrowsern, Screenreadern und Javasript-Verweigerern auch so gebraucht.

Da wirfst du ein bisschen viel in einen Topf. Bei Suchmaschinen, Blindenbrowsern, Textbrowsern, Screenreadern wird JavaScript durchaus ausgeführt. Und „das Problem sind nicht die Leute, die bewusst JavaScript in ihrem Browser deaktivieren. Wenngleich das auch beachtet werden sollte, das ist beileibe nicht die Hauptursache für JavaScript-Fehler.“ (wie Jeremy Keith sagte)

Mit Javascript ergänze ich noch einige Funktionen für mehr Komfort. Buttons, die nur in Komfort-Variante einen Zweck haben, sollten auch nur dort existieren.

Das ist völlig richtig. Du kannst das aber auch einfacher haben, indem du all diesen Buttons, die ohne JavaScript keine Funktion haben, im HTML ein disabled-Attribut mitgibst, welches du mit JavaScript entfernst.

Dann sind das zwar auch wenn JavaScript nicht ausgeführt wird button-Elemente, aber ich denke, das ist auch gut so. Es sollen ja Buttons sein – und das darf sich durchaus im HTML widerspiegeln.

Für den Nutzer verhalten sich <button disabled> ohne JavaScript nicht wie Buttons: sie sind keine interaktiven Elemente, sie sind nicht in der Tab-Reihenfolge bei Tastaturbedienung. Alles gut also.

Wenn du aber immer noch aufwendigere DOM-Umbauten in Erwägung ziehen solltest, dann würde ich den Inhalt der mit JavaScript zu generierenden Buttons in ein span (oder ein custom element wie x-button) tun und dieses dann komplett in den Button hängen. Beispiel.

Wenn’s auch in Uralt-Browsern funktionieren soll, implementierst du das eben mit function statt => und var statt let. Und wenn’s auch in Steinzeit-Browsern funktionieren soll, dann mit getElementsByClassName() und for-Schleife.

Außerdem möchte ich Sachen, die nur in manchen Browsern funktionieren, nach Möglichkeit nicht verwenden. Im Internet Explorer funktioniert das laut https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/classList erst ab Version 10.

Aber Steinzeit-Browser, echt jetzt? Ich darf dich an deine Worte erinnern: „Sie [die Seite] enthält alle notwendigen Funktionen.“ Die Seite funktioniert also auch in IE < 10. Der halbe Nutzer, der noch mit einem IE < 10 dagerkommt, hat dieselbe UX wie andere Nutzer, bei denen JavaScript nicht ausgeführt wird. So what?

Jedenfalls habe ich nicht vor, Workarrounds für die weit verbreiteten Browser ie7 bis ie10 zu bauen.

Sollst du auch nicht. Die Seite funktioniert ja. Nochmal Jeremry Keith: „Es ist ein verbreiteter Irrglaube, dass progressive enhancement heißt, seine Zeit in alte Browser zu stecken – das Gegenteil ist der Fall. Die Grundfunktionalität zu erstellen dauert nicht allzu lange. Wenn man das getan hat, kann man seine Zeit damit verbringen, mit den neusten und großartigsten Browsertechnologien zu experimentieren; sicher in dem Wissen, dass selbst wenn diese noch nicht weitgehend unterstützt werden, man den Fallback ja bereits hat.“

Auch das hidden-Attribut kenne ich nicht, aber laut https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute/hidden funktioniert es erst ab IE11.

[hidden] { display: none !important } ins Stylesheet geschrieben – und schon funktioniert’s auch in IE < 11.

was daran [am hidden-Attribut] besser sein soll, als display:none;.

display ist eine Darstellungs-Angabe; hidden ist eine funktionale Angabe. Ob (nicht wie) etwas dargestellt werden soll, sollte durchaus im HTML/DOM stehen – als Attribut des betreffenden Elements.

Außerdem will man womöglich für nicht angezeigte Elemente den Platz freihalten. Kleiner Eintrag ins Stylesheet: [hidden] { display: block; visibility: hidden }.

Und außerdem will man sich nicht den Kopf zerbrechen, auf welchen Wert man display setzen muss, um ein verstecktes Element wieder anzuzeigen. Beispiel (unten).

Das aria-expanded-Attribut kannte ich bisher nicht. Und in selfhtml steht dazu auch wenig brauchbares. Die von dir verlinkte Seite habe ich gleich wieder zu gemacht. Wenn mich mein Pc-Lautsprecher ungefragt anbrüllt, nachdem ich eine Seite öffne, mache ich sie wieder zu und besuche sie nicht wieder.

?? Mich brüllt bei Menus & Menu Buttons nichts an.

Außerdem lerne ich neue Sachen sehr viel leichter, wenn ich sie auf Deutsch erklärt bekomme.

Es wäre sicher eine lohnende Aufgabe, die ganzen Artikel von Inclusive components ins Deutsche zu übersetzen.

Das ist auch Sinn der Sache. Es gibt 4 mögliche Zustände: kein class-Attribut, class="offen", class="zu" und class="hi". Beim Anklicken des Buttons bzw. Links soll folgendes passieren: Wenn es vorher class="zu" war, soll es danach class="offen" sein. In allen anderen Fällen soll es danach class="zu" sein.

Den Sinn habe ich nicht verstanden. class="hi" taucht im Weiteren nicht auf. Und für „offen“ und „zu“ sollte ein Flag reichen – eben das aria-expanded-Attribut. (Oder zusätzlich noch ein hidden-Attribut am betreffenden Element; das macht dann aber zusätzliche Arbeit.)

LLAP 🖖

[Friedel]

Hallo,

Diese Seite wird von Suchmaschinen, Blindenbrowsern, Textbrowsern, Screenreadern und Javasript-Verweigerern auch so gebraucht. Da wirfst du ein bisschen viel in einen Topf. Bei Suchmaschinen, Blindenbrowsern, Textbrowsern, Screenreadern wird JavaScript durchaus ausgeführt. Und „das Problem sind nicht die Leute, die bewusst JavaScript in ihrem Browser deaktivieren. Wenngleich das auch beachtet werden sollte, das ist beileibe nicht die Hauptursache für JavaScript-Fehler.“

Ich habe nicht vor, mehr als 2 Töpfe zu füllen. Das ist nicht "ein bisschen viel", sondern nur eine unvollständige Auflistung. Wenn einzelne User in dieser Gruppe genannt werden, und trotzdem auf dem andern Topf was wollen und auch vertragen, soll es mir recht sein. Und dass das nicht die Hauptursache für von JavaScript-Fehlern ist, weiß ich aus Erfahrung. Das ist aber die Ursache, die ich nicht verhindern kann und deshalb immer berücksichtigen muss.

Du kannst das aber auch einfacher haben, indem du all diesen Buttons, die ohne JavaScript keine Funktion haben, im HTML ein disabled-Attribut mitgibst, welches du mit JavaScript entfernst

Auf die Idee hätte ich auch schon kommen können. Danke. Das mach ich.

Aber Steinzeit-Browser, echt jetzt?

Ich dachte, ich hätte das mit den Browsern schon beschrieben. Aber das war offensichtlich wo anders. Hier finde ich es nicht. Die marktführenden Sps-Programmier-Softwares (Simatic Step7, WinCC flexilbe, TIA Portal) benötigen in der aktuellen Version Winwows7. Deshalb haben die meisten Programmierer Firmenrechner mit diesem System. Die anderen arbeiten meist in Firmen, die Anlagen betreiben, die noch mit Simatic Step5 programmiert wurden. Diese Programmierer müssen auf ihrem Rechner daher WinXP haben. Darauf läuft dann auch Simatic Step7 und WinCC flexilbe, allerdings nicht TIA Portal. Wenn diese Leute ein Browserupdate wollen, müssen sie sich an den für sie zuständigen Admin wenden, der natürlich zu einer ganz anderen Abteilung gehört. IT hat schließlich nichts mit Anlagenprogrammierung, Anlagenwartung o.ä. zu tun. Damit der seinen Dienst abrechnen kann, braucht er also vom Vorgesetzten des Programmierers einen Auftrag… Mein Vorgesetzten hat mich bei der Gelegenheit gefragt, welches Problem es denn mit dem alten Browser gibt und wozu ich den brauche. Wir hatten damals viel Stress und sind trotz Überstunden und Samstagsarbeit mit der Arbeit nicht nachgekommen. Ich habe daher erklärt, dass ich mich während der Arbeit langweile und im Internet surfen will… Viele Leute aus meiner Berufsgruppe und auch aus vielen anderen benutzen auf ihren Arbeitsrechnern (oft nicht ganz freiwillig) den Browser, der mit dem Betriebssystem installiert wurde. Bei Win7 kann man unter verschiedenen Browsern wählen. Der neuste davon ist der IE8, der auch auf meinem Arbeitsrechner ist. Diese Browser werden wohl noch mindestens so lange benutzt werden, wie Siemens den Markt für SPS-Progammierung beherrscht.

Den Sinn habe ich nicht verstanden. class="hi" taucht im Weiteren nicht auf. Und für „offen“ und „zu“ sollte ein Flag reichen – eben das aria-expanded-Attribut.

Diese 4 Möglichkeiten mit 3 Klassen gibt es aber und sie werden auch gebraucht. Aber das habe ich nicht beschrieben, weil es nicht zu diesem Problem gehört.

Ich danke dir. Ich denke, ich komme jetzt erst mal selbst weiter.

[Peter]

Hallo Friedel!

Deine Beschreibung macht einige Vorgaben ohne die zu erklären. Ich rate dir mal zu erklären was du am Ende bauen möchtest. Ansonsten verzetteln wir uns schnell.

Ich vermute du willst eine aufklappbare Ordnerstruktur bauen, nicht wahr? Dazu sind viele Lösungen denkbar, die in Javascript mglw. einfacher umzusetzen sind. Kommt z.B. jQuery in Frage?

Oder kannst du nicht das PHP Script ändern sodass es für JS freundlicheres HTML ausspruckt? Warum muss JS Bilder und Text in ein Element einschließen? Geht das nicht mit einem Tag im HTML Template? Fragen über Fragen ;-D

In jedem <li>, das eine <ul> enthält

Also mit getElementsByTagName oder querySelectorAll findest du diese Elemente.

Mit parentNode, children, childNodes, firstChild, firstElementChild u.s.w. kannst du dich im DOM bewegen und nahe Elemente finden.

querySelector und querySelectorAll gibts auch an einzelnen Elementen. Du kannst Z.B. erst mit document.querySelectorAll("LI") alle LI finden. Dann bei jedem LI mit li.querySelector('UL') prüfen ob sie eine UL enthalten.

Es gibt zwar :has für diesen Fall aber das unterstützen noch nicht viele (kein??) Browser.

Wie gesagt sind versch. Lösungen möglich die aber am Ende des Tages alle die Standard DOM Methoden verwenden.

sollen alle Bilder und der Text in > <a href="javascript:ordnerlink('o1')"></a> eingeschlossen werden,

Mit document.createElement kannst du Elemente erzeugen. Mit addEventListener kannst du ihnen Event-Handler verpassen. Das ist besser als href="javascript:".

Mit appendChild kannst du schon vorhandene DOM Nodes ans neue Element hängen und damit verschieben. Und am Ende das neue Element an der alten Stelle (dem LI?) wieder ins DOM hängen.

Die bestehenden Nodes wären soweit ich dich verstehe die IMG Elemente und Textnodes danach. Die findest du in den childNodes des LIs. Die kannst du mit einer for Schleife durchlaufen. Das UL ignorierst du dabei (tagName == "UL").

wobei die 1 von 'o1' durch eine fortlaufende Nummer ersetzt werden soll. Und das enthaltene <ul> soll zu <ul id="o1"> erweitert werden.

Eine fortlaufende Nummer bekommst du wenn du mit einer for Schleife durch den ElementArray läufst.

Du willst wohl eine Verknüpfung zwischen A und UL über die ID erzeugen. Mir dünkt das ist nicht vonnöten! ;-D In einem Eventhandler beim A kannst du das zugehörige UL auch ohne ID finden. Es ist ausgehend vom event.target wahrsch. das nextSibling.

Gruß Peter

[Friedel]

Ich habe vor einigen Minuten eine umfangreiche Antwort geschrieben, die offensichtlich nicht gespeichert wurde. Ich schreibe das nicht alles nochmal.

Warum muss JS Bilder und Text in ein Element einschließen? Geht das nicht mit einem Tag im HTML Template? Fragen über Fragen ;-D

Sinnvoll sind diese Fragen aber nicht.

querySelector und querySelectorAll gibts auch an einzelnen Elementen. Du kannst Z.B. erst mit document.querySelectorAll("LI") alle LI finden. Dann bei jedem LI mit li.querySelector('UL') prüfen ob sie eine UL enthalten.

Ja, das würde wohl gehen. Ich habe das mit document.getElementsByTagName('ul') gemacht. Außer document.getElementsByTagName('ul')[0] sind das genau die gesuchten <ul>. — Und gerade habe ich einen Fehler in meinem Script gefunden… Das behebe ich erst mal. — Jedenfalls ist das zu bearbeitende <li> das parentNode dazu.

Mit document.createElement kannst du Elemente erzeugen.… Mit appendChild kannst du schon vorhandene DOM Nodes ans neue Element hängen und damit verschieben. Und am Ende das neue Element an der alten Stelle (dem LI?) wieder ins DOM hängen.

Ja, genau da liegt mein Problem. Das habe ich bisher nicht so hin bekommen, wie ich es will. In dem Punkt ist deine Erklärung einfacher, als die in selfhtml. Mal sehen, ob ich damit klar komme.

Mit addEventListener kannst du ihnen Event-Handler verpassen. Das ist besser als href="javascript:".

Gunnar Bittersmann hat mich schon überzeugt, dass <a href="javascript:…"> hier nicht das Mittel dar Wahl ist.

Du willst wohl eine Verknüpfung zwischen A und UL über die ID erzeugen. Mir dünkt das ist nicht vonnöten! ;-D In einem Eventhandler beim A kannst du das zugehörige UL auch ohne ID finden. Es ist ausgehend vom event.target wahrsch. das nextSibling.

Diese Id brauche ich auch noch für andere Funktionen. Ich denke, dass das hier das Mittel der Wahl ist. Aber auch ohne diese anderen Funktionen ist die Zuweisung der CSS-Klassen auf diese Weise in der ordnerlink() imho sinnvoll. Natürlich würde es aber, wie fast immer, auch anders gehen.

Aber draußen wird es (schon wieder) hell. Ich sollte mal ins Bett gehen.

Du kannst dir ja mal http://www.friedels-home.de/ ansehen. Die Navigation habe ich vor etwa 18 Jahren geschrieben. Damals war Php mit immensen Kosten verbunden, die Browser haben Html4 noch nicht standardkonform unterstützt, CSS konnte man kaum nutzen… Netscape Navigator 4 und Opera 3 haben einem das Leben wirklich schwer gemacht. Bis etwa 2006 habe ich die Site noch fleißig gewartet. Aber jetzt ist es Zeit, das ganze neu zu machen. Der ganze Java-Schrott kommt weg, die Scripte müssen größtenteils neu geschrieben werden, der Namibia-Teil kommt auf eine extra-Site usw. Und da ich mit das rechte Sprunggelenk und links einen Zeh gebrochen habe, habe ich jetzt etwas Zeit für sowas.

[Tabellenkalk]

Hallo,

Ich sollte mal ins Bett gehen.

tststs, frohe Weihnachten!

Und da ich mit das rechte Sprunggelenk und links einen Zeh gebrochen habe, habe ich jetzt etwas Zeit für sowas.

Gute Besserung!

Gruß
Kalk