Text beim Klick (mehrmals!) ändern

[Gunnar Bittersmann]

@@Max Mustermann:

nuqneH

Meine Website hat eine russische Deklinationstabelle zu bieten, die zurzeit so aufgebaut ist, dass die Wörter zunächst in kyrillischer Schrift erscheinen, beim Klicken aber in der ISO-Transliteration. Dies habe ich mit onclick="this.firstChild.nodeValue = 'XY'" hinbekommen.

Hm, vermutlich schlecht. Du pflegst die Texte an unterschiedlichen Stellen? Die in kyrillischer Schrift im HTML und die in lateinischer Schrift in JavaScript? Ungünstig.

Besser so:

<span lang="ru" class="Cyrl">язык</span>  
<span lang="ru-Latn" class="Latn-transliteration">âzyk</span>  
<span lang="ru-Latn" class="Latn-transcription-de">jasyk</span>

Ohne JavaScript lässt du alles anzeigen. Mit JavaScript setzt du eine Klasse fürs 'html'-Element

document.documentElement.className += " js";

und blendest initial die Umschreibungen mit lateinischen Buchstaben aus:

.js .Latn-transliteration, .js .Latn-transcription-de { display: none }

Mit JavaScript setzt du auf die Clicks bei einem geeigneten Element (das könnte dein 'table'-Element sein oder 'body' eine Klasse:

document.body.className = (document.body.className != "show-Latn-transliteration" ? "show-Latn-transliteration" : "show-Latn-transcription-de";

Nun möchte ich aber auch, dass nach dem _zweiten_ Klick die deutsche Transkription angezeigt wird.

Das erledigt obige Zeile gleich mit.

Im Stylesheet steht dazu noch:

.js .show-Latn-transliteration .Cyrl, .js .show-Latn-transcription-de .Cyrl { display: none }  
.js .show-Latn-transliteration .Latn-transliteration, .js .show-Latn-transcription-de .Latn-transcription-de { display: inline }

Außerdem möchte ich ein paar Formatierungen bei dem erscheinenden Text vornehmen, was damit leider nicht möglich ist.

Damit schon.

Qapla'