Text beim Klick (mehrmals!) ändern

[Max Mustermann]

@@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";`{:.language-javascript}  
>   
> und blendest initial die Umschreibungen mit lateinischen Buchstaben aus:  
>   
> `.js .Latn-transliteration, .js .Latn-transcription-de { display: none }`{:.language-css}  
>   
>   
>   
>   
> 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";`{:.language-javascript}  
>   
>   
> > 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:  
>   
> ~~~css

.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'

Bitte verzeihe mir mein Unwissen, aber wo genau kommt was hin? Kommt der ganze Javascript-Teil in den <script>-Bereich oder muss auch etwas in die Tabelle? Kannst du das nicht lieber in dem Schema darstellen:

  
<style type="text/css">  
XY  
</style>  
<script type="text/javascript">  
XY  
</script>  
<table>  
<tr>  
<td>(язык, âzyk, jasyk)</td>  
</tr>  
</table>  

Danke!