Antwort an „coder1979“ verfassen

Lieber coder1979,

    <select onchange="changeLang(this.value);">
        <option value="">Bitte wählen</option>
        <option value="0">Deutsch</option>
        <option value="1">Englisch</option>
        <option value="2">Spanisch</option>
    </select>

also ich würde da Radio-Buttons verwenden. Im <label>-Text würde ich die spracheigene Version notieren:

<ul id="lang-select">
  <li>
    <label for="de">
      <input id="de" name="lang" type="radio" value="de" checked>
      Deutsch
    </label>
  </li>
  <li>
    <label for="en">
      <input id="en" name="lang" type="radio" value="en">
      English
    </label>
  </li>
  <li>
    <label for="es">
      <input id="es" name="lang" type="radio" value="es">
      Español
    </label>
  </li>
</ul>

Das onchange-Attribut in HTML würde ich durch einen Aufruf von addEventListener() in JavaScript ersetzen.

Es kann reizvoll sein, die Textbausteine in einer JSON-Datei vorzuhalten, die von JavaScript geladen wird. Man kann natürlich auch alles gleich zusammen in das HTML-Dokument werfen, wenn man das kompakt in einer Datei ausliefern muss:

{
  "links-and-layout-remain-intact": {
    "de": "Links und Layout bleiben erhalten",
    "en": "Links and layout are preserved",
    "es": "Se conservan los enlaces y el diseño."
  },
  "welcome": {
    "de": "Herzlich Willkommen!",
    "en": "Warm Welcome!",
    "es": "¡Cálida bienvenida!"
  }
}

Hier wird einem Schlüssel ein Objekt zugewiesen, welches für jede der Sprachen eine eigene Eigenschaft hat - der Text in der jeweiligen Landessprache. Sollte einmal eine Sprache zu einem Schlüssel fehlen, kann die Übersetzungsfunktion (oder -methode) eine Default-Sprache als Ersatz wählen - oder den Schlüssel selbst als Notlösung verwenden.

Die Textbausteine können via JavaScript als textContent-Eigenschaft einer DOMNode zugewiesen werden. Welche Bausteine wohin müssen, könnte man durch ein passendes Attribut angeben, sagen wir data-i18n (ein data-Attribut):

<h1 data-i18n="welcome"></h1>
<p class="notice" data-i18n="links-and-layout-remain-intact"></p>

Mittels JavaScript nimmt man den Attributwert des lang-Attributs des <html>-Elements und findet nun die passende Sprachversion für den Schlüssel aus dem data-i18n-Attribut (also "welcome" auf "de") und schreibt das Ergebnis in die textContent-Eigenschaft des H1-Elementobjektes.

Auf diese Weise kann man live sofort alle Textbausteine in einer anderen Sprache anzeigen lassen, also sprichwörtlich onchange beim jeweiligen Radio-Button.

[Edit]Ich habe so etwas schon mal verwendet.[/Edit]

Liebe Grüße

Felix Riesterer

Hi Felix,

super Danke! Genau nach dem Tipp hab ich gesucht. Die Sprachauswahl mach ich tatsächlich später anders (mit Flaggen), in meinem Beispiel war das nur die Dirty-Variante. Aber dein Tipp mit dem JSON-Array und dem Schlüssel/Data-Attribut find ich deutlich besser als meinen Ansatz (und auch Pflegeleicher und wahrscheinlich deutlich schneller)

freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen