Probleme mit Übersetzungen beim Sprachwechsel in einer Webanwendung

[kay86]

Beschreibung:​

Ich arbeite an einer Webanwendung, in der Benutzer die Sprache über Buttons wechseln können. Dabei sollen alle Labels, Buttons und Tooltip-Texte in der Benutzeroberfläche entsprechend der gewählten Sprache aktualisiert werden. Jedoch treten folgende Probleme auf:

1. Tooltip-Inhalte werden nicht vollständig aktualisiert:
   Nach dem Sprachwechsel bleiben einige Texte unverändert oder werden nicht korrekt geladen.
2. Inconsistent Updating:
   Einige Labels und Buttons ändern sich korrekt, während andere ihre ursprünglichen Texte beibehalten.
3. Keine Fehlermeldung, aber keine Änderungen:
   Die Konsole zeigt keine Fehler an, dennoch erfolgt keine vollständige Aktualisierung der Inhalte.
4. 
   
   

   // Sprache im Local Storage speichern
   function saveLanguageToLocalStorage(language) {
     localStorage.setItem("selectedLanguage", language);
   }
   
   // Sprachwechsel anwenden
   function applyLanguage(language) {
     const translation = translations[language];
     if (!translation) return;
   
     // Inhalte der Labels und Buttons ändern
     document.getElementById("sku-label").textContent = translation.sku;
     document.getElementById("description-label").textContent = translation.description;
     document.getElementById("color-label").textContent = translation.color;
     document.getElementById("size-label").textContent = translation.size;
     document.getElementById("btnSubmit").textContent = translation.submit;
     document.getElementById("btnReset").textContent = translation.reset;
     document.getElementById("btnPrint").textContent = translation.print;
     document.getElementById("autoreset-label").textContent = translation.autoreset;
   
     // Tooltip-Inhalte aktualisieren
     document.getElementById("tooltip-title").textContent = translation.tooltip.title;
     document.getElementById("tooltip-intro").textContent = translation.tooltip.intro;
   
     // Sprache speichern
     saveLanguageToLocalStorage(language);
   }
   
   // Eventlistener für Sprachwechsel
   function changeLanguage(event) {
     const selectedLanguage = event.target.dataset.lang;
     if (selectedLanguage) {
       applyLanguage(selectedLanguage);
     }
   }
   
   // Event-Listener hinzufügen
   document.addEventListener("DOMContentLoaded", () => {
     const savedLanguage = localStorage.getItem("selectedLanguage") || "DE";
     applyLanguage(savedLanguage);
   
     document.querySelectorAll(".language-button").forEach(button => {
       button.addEventListener("click", changeLanguage);
     });
   });

   <div id="tooltip-content">
     <h2 id="tooltip-title">Tooltip Titel</h2>
     <p id="tooltip-intro">Tooltip Beschreibung</p>
   </div>
   
   <button class="language-button" data-lang="DE">Deutsch</button>
   <button class="language-button" data-lang="EN">Englisch</button>

5. Code-Beispiel online testen:​

   CodePen Beispiel

6. ---

   Fragen:​

   1. Warum werden die Tooltip-Texte manchmal nicht korrekt aktualisiert, obwohl sie in der applyLanguage-Funktion eindeutig definiert sind?
   2. Welche Fehlerquellen könnten dafür sorgen, dass nur einige Inhalte erfolgreich aktualisiert werden?
   3. Gibt es bewährte Methoden, um solche Probleme im Sprachwechsel effizient zu debuggen und zu beheben?
   Vielen Dank für eure Unterstützung! 😊

 

[mihe7]

CodePen Beispiel

Das Beispiel funktioniert nicht: der JS-Teil beginnt mit <script> (muss raus), im HTML ist die ID sku-info, in JS wird nach sku-label gesucht... Weiter habe ich nicht geschaut.

 

[kay86]

Das Beispiel funktioniert nicht: der JS-Teil beginnt mit <script> (muss raus), im HTML ist die ID sku-info, in JS wird nach sku-label gesucht... Weiter habe ich nicht geschaut.

Danke mihe7 für ihr Beitrag,aber bitte meine Themen Eröffnung richtig lesen.Ich habe auf codpen nur meine gesamt strucktur/Aufbau rein gestellt so wie ich es aktuell verwende.Um Missverständnise vorzubeugen habe ich im Java Bereich die Bereich auf inaktiv gesetzt die nicht benötigten werden für das aktuelle Problem,aber trozdem meinen aufbau des Java Bereichs zeigen

 

[Marinek]

Hi,

Ich verstehe deine Anmerkung nicht. Ich habe mihe7 so verstanden, dass deine Programmierung Fehler enthält.

Ich würde behaupten du müsstest diese korrigieren, damit wir sehen was wirklich falsch ist.

Weiter ist das hier ein Java Forum. Kein Java Script Forum. @KonradM vielleicht kannst du den Thread entsprechend schieben bitte.

Gruß
Martin

 

[KonradN]

Thread verschoben. Danke für den Hinweis.

 

[kay86]

Ich entschuldige mich das ich meine themen Eröffnung im falschen Threads eröffnet habe!

Ich Versuch mal das Problem genauer zu beschreiben,aber bin kein guter Erklär Behr also seht es mir nach.

Ich arbeite an einer Webanwendung mit einer Sprachumschaltung zwischen Deutsch, Englisch und Polnisch. Die Übersetzung der Labels und Buttons funktioniert problemlos, aber die Texte in den Tooltips werden nicht aktualisiert. Dies gilt für alle Sprachen.

Die Tooltip-Elemente haben eindeutige IDs und sind korrekt im DOM vorhanden. Es gibt keine Fehlermeldungen in der Konsole, aber die Tooltip-Texte bleiben unverändert, unabhängig von der ausgewählten Sprache.

Problem:

Labels und Buttons: Funktionieren einwandfrei. Texte ändern sich korrekt je nach gewählter Sprache (Deutsch, Englisch, Polnisch).

Tooltip-Texte: Bleiben unverändert, selbst wenn die Funktion applyLanguage() korrekt aufgerufen wird.

 

[M.L.]

Alternativvorschlag: man verwendet für die Übersetzungen die Deepl-API (*) (bietet Implementierungen mit -serverseitigem- JS (-> Node.JS), Java, Python,... https://github.com/DeepLcom/ und https://developers.deepl.com/docs/de/api-reference/client-libraries

(*)könnte ab einer gewissen Nutzungsmenge Geld kosten

 

[mihe7]

Tooltip-Texte: Bleiben unverändert, selbst wenn die Funktion applyLanguage() korrekt aufgerufen wird.

Das passt doch zu dem Fehler, den ich oben schon genannt hatte. applyLanguage sucht das Element sku-label, das aber nicht existiert. Daher wird an der Stelle ein Fehler ausgelöst und die Verarbeitung bricht ab.

 

[kay86]

Alternativvorschlag: man verwendet für die Übersetzungen die Deepl-API (*) (bietet Implementierungen mit -serverseitigem- JS (-> Node.JS), Java, Python,... https://github.com/DeepLcom/ und https://developers.deepl.com/docs/de/api-reference/client-libraries

(*)könnte ab einer gewissen Nutzungsmenge Geld kosten

Ja das ist eine Möglichkeit und ein einfacherer weg .Diesen schließe ich aber aus, da die Übersetzung nicht immer korrekt ist und oftmals nonsins dabei raus kommt.Das weiß ich von meinen Polnische Kollegen! Daher habe ich diesen Weg gewählt und habe die entsprechenden Texte im Java und html Bereich vorgegeben um so bei Bedarf Einfluss auf die richtige Übersetzung zu nehmen.M.L. ich danke dir aber trotzdem für deinen Vorschlag.

 

[kay86]

Danke an alle für die Tipps. . Ich habe noch malle alle so gut es geht überarbeitet gestern in der Nacht, und die genannten Fehler behoben. Zusätzlich habe ich für die Problemfindung alles, was mit den Labels zu tun hat und funktioniert bei CodePen herausgenommen. Leider funktioniert das ganze aber immer noch nicht so wie es soll und bin noch bei der Fehler suche

CodePen Beispiel

 

[mihe7]

und die genannten Fehler behoben

Die Elemente, deren IDs auf "-label" enden, existieren in dem HTML auf CodePen nicht.

 

[kay86]

Sorry da da ist mir ein Fehler gestern Nacht passiert,da hab ich vergessen den Bereich raus zu nehmen.hab es jetzt raus genommen(über Handy)

 

[mihe7]

Okay, jetzt läuft das Beispiel, aber wo liegt jetzt das Problem?

 

[kay86]

Alles funktioniert inzwischen, muss nur noch ein paar Probleme bei der Übersetzung korrigieren, da nicht alles übersetzt wird. Ich danke aber allen für die Hilfe.

 

[kay86]

Sorry, wenn ich mich wieder hier an mein altes Thema einklinke. Aber irgendwie steckt bei mir beim Thema Tooltip und der Übersetzungsfunktion der Wurm drin. Ich hatte in der Zwischenzeit den Inhalt meines Tooltips überarbeitet, aber ich bekomme es nicht hin, dass bei der Sprachumschaltung der Inhalt des Tooltips mit übersetzt wird. CodePen Beispiel

 

[mihe7]

Der CodePen Beispiel ist ja auch schon wieder falsch. Diesmal scheitert es schon an den schließenden Klammern der JS-Objekte. Und, wenn ich es richtig sehe, fehlen im HTML sämtliche IDs.

 

[kay86]

Ich mal wieder😵‍💫. Da habe ich ordentlich geschlafen bei der Umsetzung. Habe heute erstmal meine Fehler behoben und die IDs im HTML-Bereich gesetzt. Das kommt davon, wenn man sich beim Arbeiten nur auf einen Bereich fokussiert
CodePen Beispiel

 

[Oneixee5]

Um hier mal meinen Senf dazu zu geben. Ich finde das Herangehen umständlich. Ich will mal kurz skizzieren wie ich das machen würde.

...
// use data attribute for language details
<h2 data-lang="guideTitle">Benutzeranleitung für das Formular</h2>
<p data-lang="guideIntro">...</p>
<p data-lang="formFieldsTitle">...</p>
...

// static translations - but can load from server as JSON
const translations = {
    EN: {
    guideTitle: "User Guide for the Form",
    guideIntro: "This form is used to input and manage product data such as SKU, description, color, and size. Follow the instructions to correctly record the data.",
    formFieldsTitle: "Form Fields"
  }
}

// select language from translations, 'EN' for example
const lang = translations['EN'];

// translate all elements with data-lang attribute
Object.keys(lang).forEach(key => document.querySelector(`[data-lang=${key}]`).innerHTML = lang[key]);

 

[kay86]

Um hier mal meinen Senf dazu zu geben. Ich finde das Herangehen umständlich. Ich will mal kurz skizzieren wie ich das machen würde.

...
// use data attribute for language details
<h2 data-lang="guideTitle">Benutzeranleitung für das Formular</h2>
<p data-lang="guideIntro">...</p>
<p data-lang="formFieldsTitle">...</p>
...

// static translations - but can load from server as JSON
const translations = {
    EN: {
    guideTitle: "User Guide for the Form",
    guideIntro: "This form is used to input and manage product data such as SKU, description, color, and size. Follow the instructions to correctly record the data.",
    formFieldsTitle: "Form Fields"
  }
}

// select language from translations, 'EN' for example
const lang = translations['EN'];

// translate all elements with data-lang attribute
Object.keys(lang).forEach(key => document.querySelector(`[data-lang=${key}]`).innerHTML = lang[key]);

 

[kay86]

Danke, jeder Senf ist willkommen, und ich danke Ihnen dafür, Oneixee5, für Ihren Beitrag. Könnten Sie dazu das Ganze auch etwas weiter ausführen im Detail?

 

[Oneixee5]

Ich weiß nicht. HTML und translations-Objekt sind von deinem Code abgeleitet. Die Auswahl der Sprache und Speicherung hast du ja schon umgesetzt. Für die Übersetzung wird in meinem Beispiel nicht das id-Attribut verwendet, sondern das data-Attribut. So wird der Wert in data-Attribut mit dem Sprachobjekt verknüpft. Es findet keine Fehlerbehandlung statt, deshalb ist das so kurz.
Ansonsten - ich bin nicht gut im Erklären - nimm den Code und teste einfach. In der Doku findest du die Erklärung der Befehle.
Mit Codepen komme ich nicht klar, meiner Meinung nach funktioniert das nicht, ich verwende immer JsFiddle.

 

[mihe7]

Könnten Sie dazu das Ganze auch etwas weiter ausführen im Detail?

In Zeile 18 wird das EN-Objekt aus translations in der Variablen lang abgelegt. Das Objekt besteht aus Schlüssel-Wert-Paaren. Die Schlüssel sind hier guideTitle, guideIntro und formFieldsTitle.

In Zeile 20 wird für jeden dieser Schlüssel, das Argument von forEach ausgeführt. Dabei wird der Schlüssel als key referenziert. Der querySelector verwendet CSS-Selektoren, wobei hier ein Element gesucht, das über ein Attribut data-lang mit einem Wert verfügt, der mit dem in key angegebenen Schlüssel übereinstimmt. Der innerhalb dieses Elements vorhandene HTML-Code wird durch lang[key] ersetzt. Das ist nichts anderes als die Übersetzung des Schlüssels (guideTitle, guidIntro oder formFieldsTitle in diesem Fall).

Im Endeffekt ist das nichts anderes als die Kurzschreibweise von

for (const key of Object.keys(lang)) {
    document.querySelector(`[data-lang=${key}]`).innerHTML = lang[key]
}

oder, wenn man es ausführlich macht:

const keys = Object.keys(lang);
for (const key of keys) {
    const translation = lang[key];
    const element = document.querySelector(`[data-lang=${key}]`);
    element.innerHTML = translation;
}

 

[kay86]

In Zeile 18 wird das EN-Objekt aus translations in der Variablen lang abgelegt. Das Objekt besteht aus Schlüssel-Wert-Paaren. Die Schlüssel sind hier guideTitle, guideIntro und formFieldsTitle.

In Zeile 20 wird für jeden dieser Schlüssel, das Argument von forEach ausgeführt. Dabei wird der Schlüssel als key referenziert. Der querySelector verwendet CSS-Selektoren, wobei hier ein Element gesucht, das über ein Attribut data-lang mit einem Wert verfügt, der mit dem in key angegebenen Schlüssel übereinstimmt. Der innerhalb dieses Elements vorhandene HTML-Code wird durch lang[key] ersetzt. Das ist nichts anderes als die Übersetzung des Schlüssels (guideTitle, guidIntro oder formFieldsTitle in diesem Fall).

Im Endeffekt ist das nichts anderes als die Kurzschreibweise von

for (const key of Object.keys(lang)) {
    document.querySelector(`[data-lang=${key}]`).innerHTML = lang[key]
}

oder, wenn man es ausführlich macht:

const keys = Object.keys(lang);
for (const key of keys) {
    const translation = lang[key];
    const element = document.querySelector(`[data-lang=${key}]`);
    element.innerHTML = translation;
}

Danke mihe7 für die Beschreibung bzw Erläuterung. Ich habe das Ganze mal umgesetzt und hoffe, ich habe es richtig verstanden(aber so wie ich mich kenne, habe ich bestimmt wieder Fehler drin).

https://codepen.io/Kay-Siebke/pen/emOZZRw

 

[mihe7]

aber so wie ich mich kenne, habe ich bestimmt wieder Fehler drin

Richtig. Das geht schon damit los, dass die Keys in HTML und JavaScript unterschiedlich sind.

Zum Beispiel: HTML "guide-title", JavaScript: guideTitle. So läuft das natürlich nicht.

Dann hast Du in Deinem JavaScript zweimal die gleiche Funktion definiert, außerdem setzt Du am Ende des Listeners immer auf DE zurück...

Kopier mal das rüber:

// static translations - but can load from server as JSON
const translations = {
  DE: {
    "guide-title": "Benutzeranleitung für das Formular"
  },

  EN: {
    "guide-title": "User Guide for the Form"
  },

  PL: {
    "guide-title": "Instrukcja obsługi formularza"
  }
};

// Apply translations to the page
function applyLanguage(language) {
  const translation = translations[language];
  if (!translation) return;
  
  Object.keys(translation).forEach(key => {
    const element = document.querySelector(`[data-lang="${key}"]`);
    if (element) {
      element.innerHTML = translation[key];
    }
  });
}

// Handle language change
function changeLanguage(event) {
  const selectedLanguage = event.target.getAttribute("data-lang");
  if (selectedLanguage) {
    applyLanguage(selectedLanguage);
  }
}

// Initialize language selection
document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".language-button").forEach((button) => {
    button.addEventListener("click", changeLanguage);
  });

});
// Set default language
applyLanguage("DE");

Keys kannst Du im Anschluss beliebig hinzufügen - pass aber auf, dass die Keys mit den Werten in den data-*-Attributen übereinstimmen!

 

[kay86]

Richtig. Das geht schon damit los, dass die Keys in HTML und JavaScript unterschiedlich sind.

Zum Beispiel: HTML "guide-title", JavaScript: guideTitle. So läuft das natürlich nicht.

Dann hast Du in Deinem JavaScript zweimal die gleiche Funktion definiert, außerdem setzt Du am Ende des Listeners immer auf DE zurück...

Kopier mal das rüber:

// static translations - but can load from server as JSON
const translations = {
  DE: {
    "guide-title": "Benutzeranleitung für das Formular"
  },

  EN: {
    "guide-title": "User Guide for the Form"
  },

  PL: {
    "guide-title": "Instrukcja obsługi formularza"
  }
};

// Apply translations to the page
function applyLanguage(language) {
  const translation = translations[language];
  if (!translation) return;
 
  Object.keys(translation).forEach(key => {
    const element = document.querySelector(`[data-lang="${key}"]`);
    if (element) {
      element.innerHTML = translation[key];
    }
  });
}

// Handle language change
function changeLanguage(event) {
  const selectedLanguage = event.target.getAttribute("data-lang");
  if (selectedLanguage) {
    applyLanguage(selectedLanguage);
  }
}

// Initialize language selection
document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".language-button").forEach((button) => {
    button.addEventListener("click", changeLanguage);
  });

});
// Set default language
applyLanguage("DE");

Keys kannst Du im Anschluss beliebig hinzufügen - pass aber auf, dass die Keys mit den Werten in den data-*-Attributen übereinstimmen!

Die Fehler mit den Keys habe ich behoben. Den Java-Script habe ich kopiert und eingesetzt, die Übersetzung funktioniert jetzt, wenngleich nicht fehlerfrei, denn dieser Bereich wird nicht übersetzt.

Keyboard Shortcuts​

• Tab: Navigiert durch die Felder.
• Enter: Bestätigt Aktionen.
• Escape: Bricht Eingaben ab.
• Alt + R: Zurücksetzen.
• Ctrl + P: Druckvorschau.

 

[mihe7]

Was daran liegt, dass es die Elemente zweimal gibt. Zuerst

<h3 data-lang="buttonsShortcutsTitle">Schaltflächen und Tastenkombinationen</h3>
    <ul data-lang="buttonsShortcutsList">
      <li data-lang="shortcutSubmit"><strong>Absenden:</strong> Speichert die Daten (aktiv, wenn alle Pflichtfelder ausgefüllt sind).</li>
      <li data-lang="shortcutReset"><strong>Zurücksetzen</strong> (Alt + R): Löscht alle Eingaben und setzt das Formular zurück.</li>
      <li data-lang="shortcutPrint"><strong>Drucken</strong> (Ctrl + P): Öffnet die Druckvorschau.</li>
      <li data-lang="shortcutTab"><strong>Tab:</strong> Navigiert durch die Formularfelder.</li>
      <li data-lang="shortcutEnter"><strong>Enter:</strong> Bestätigt Aktionen wie Absenden oder Zurücksetzen.</li>
      <li data-lang="shortcutEscape"><strong>Escape:</strong> Bricht Eingaben ab oder schließt offene Menüs.</li>
    </ul>

und weiter unten

    <h3 data-lang="keyboardShortcutsTitle">Tastenkombinationen</h3>
    <ul data-lang="keyboardShortcutsList">
      <li data-lang="shortcutTab"><strong>Tab:</strong> Navigiert durch die Felder.</li>
      <li data-lang="shortcutEnter"><strong>Enter:</strong> Bestätigt Aktionen.</li>
      <li data-lang="shortcutEscape"><strong>Escape:</strong> Bricht Eingaben ab.</li>
      <li data-lang="shortcutReset"><strong>Alt + R:</strong> Zurücksetzen.</li>
      <li data-lang="shortcutPrint"><strong>Ctrl + P:</strong> Druckvorschau.</li>
    </ul>

Das halte ich in dem Fall für unsinnig. Grundsätzlich wäre aber schon vorstellbar, dass man einen Begriff mehrfach auf der Seite hat. Der Code übersetzt in seiner jetzigen Form nur das erste Vorkommen. Wenn Du alle Vorkommen ersetzen willst, müsste man statt

  Object.keys(translation).forEach(key => {
    const element = document.querySelector(`[data-lang="${key}"]`);
    if (element) {
      element.innerHTML = translation[key];
    }
  });

einfach querySelectorAll verwenden:

  Object.keys(translation).forEach(key => 
        document.querySelectorAll(`[data-lang="${key}"]`).forEach(element => 
                element.innerHTML = translation[key]));

 

[kay86]

Das Problem habe ich inzwischen behoben.im Prozeß bei der ursprünglichen tooltip Anleitung gab es ursprünglich zwei Bereich ,einmal die Beschreibung für die Tastatur Bedienung und das andere für die Button Beschreibung.Im schreib brozes zur zusammen legung beider Bereiche ist so ungewollt eine Doppelung entstanden.ziehl war es den Inhalt kurz und knackig zu halten.

 

[kay86]

Das ganze ist zum Harre raufen.habe das ganz in mein Java shript Struktur eingefügt.leider funktioniert keine Sprachumschaltung mehr der Labels, Buttons und tooltip.Ich hatte das ganz erstmal nur zusammen gesetzt den Java shript.Mus mal wenn ich Zeit habe am Wochenende schauen wo der Fehler liegt

 

[kay86]

https://codepen.io/Kay-Siebke/pen/emOZZRw

 

[Oneixee5]

Du musst systematisch vorgehen. Du hast die Funktion nicht geändert aber die Buttons, event.target ist nun die Flagge und die hat kein Attribut "data-lang":

// Handle language change
function changeLanguage(event) {
  const selectedLanguage = event.target.getAttribute("data-lang");
  if (selectedLanguage) {
    applyLanguage(selectedLanguage);
  }
}

 

[kay86]

Du musst systematisch vorgehen. Du hast die Funktion nicht geändert aber die Buttons, event.target ist nun die Flagge und die hat kein Attribut "data-lang":

// Handle language change
function changeLanguage(event) {
  const selectedLanguage = event.target.getAttribute("data-lang");
  if (selectedLanguage) {
    applyLanguage(selectedLanguage);
  }
}

Danke für den Hinweis,wie gesagt ich habe erst gerade angefangen das ganze zusammen zu setzen

 

[Oneixee5]

Weil du schreibst:

ich habe erst gerade angefangen

Das Projekt sieht aus als wäre es uralt. Hast du mal daran gedacht, das irgendwie moderner umzusetzen. Alles per Hand und zu Fuß zu schreiben funktioniert zwar aber du merkst ja selbst, es dauert alles sehr lange und du musst alle Abhängigkeiten kennen und aus dem Gedächtnis verwalten. Falls es mal komplexer wird, kommt man schnell an seine Grenzen. Das Ganze dann mal später zu warten und weiter zu entwickeln, ist eher grenzwertig bis unmöglich.

 

[kay86]

Was wäre denn dein vorschlag Oneixee5 ?
Ich bin zum Beispiel gerade dabei , einen anderen Ansatz auszuprobieren.

<div data-lang="tooltip-container" class="tooltip-container">
  <button data-lang="tooltipButton" aria-describedby="tooltip-content">
    <span data-lang-PL="Pokaż instrukcję"
          data-lang-EN="Show Instructions"
          data-lang-DE="Anleitung anzeigen"></span>
  </button>

  <div data-lang="tooltipContent" class="tooltip" role="tooltip" id="tooltip-content">
    <p data-lang="tooltipDescription"></p>

    <!-- Titel der Anleitung -->
    <h2 data-lang-PL="Instrukcja obsługi formularza"
        data-lang-EN="User Guide for the Form"
        data-lang-DE="Benutzeranleitung für das Formular"></h2>
  </div>

  <div class="form-container">
  <!-- Sprachwahl mit Buttons -->
  <div class="language-container">
    <button class="language-button" data-lang="DE">
      <span class="flag-icon flag-icon-de"></span> <!-- Deutschland -->
    </button>
    <button class="language-button" data-lang="EN">
      <span class="flag-icon flag-icon-gb"></span> <!-- Großbritannien -->
    </button>
    <button class="language-button" data-lang="PL">
      <span class="flag-icon flag-icon-pl"></span> <!-- Polen -->
    </button>
  </div> 
</div>

 

[Oneixee5]

Das funktioniert sehr gut: https://quasar.dev/ ansonsten gibt es da viele Möglichkeiten, bspw: React oder Vue.js uvam.

 

[kay86]

Das funktioniert sehr gut: https://quasar.dev/ ansonsten gibt es da viele Möglichkeiten, bspw: React oder Vue.js uvam.

Wen ich das richtig verstehe,müßte ich meine ganze html in Quasar Farmwork abändern/anpassen ?und wie passt jetzt das ganze mit meinem Tool Tip und der Übersetzung Funktion da rein . Sorry wenn ich blöd Frage

 

[Oneixee5]

Naja, so würde man da nicht ran gehen, das ist etwas überstürzt. Ich kann dir versprechen, dass das auf jeden Fall geht.
Wenn du das nur für dich machst, dann kannst du natürlich jederzeit neu anfangen. Wenn du Termine hast, musst du erstmal überlegen ob du das schaffen kannst.
Mit Quasar baust du alles neu. Vue könntest du aber bspw. in eine bestehende Seite zusätzlich einbauen. So muss man nicht ganz von vorne beginnen.
Also zuerst mal überlegen. Um dir etwas konkretes zu empfehlen sind hier zu wenigr Infos vorhanden.

 

[kay86]

Naja, so würde man da nicht ran gehen, das ist etwas überstürzt. Ich kann dir versprechen, dass das auf jeden Fall geht.
Wenn du das nur für dich machst, dann kannst du natürlich jederzeit neu anfangen. Wenn du Termine hast, musst du erstmal überlegen ob du das schaffen kannst.
Mit Quasar baust du alles neu. Vue könntest du aber bspw. in eine bestehende Seite zusätzlich einbauen. So muss man nicht ganz von vorne beginnen.
Also zuerst mal überlegen. Um dir etwas konkretes zu empfehlen sind hier zu wenigr Infos vorhanden.

Danke für die auskunft.Ich kann wenn gewünscht das ganze Projekt zur Verfügung stellen,Dan hätte man eine klare Übersicht,Achtung aber das ganze ist Recht umfangreiche und ist eine Arbeit von Monaten.Dies war ein Prozeß bei dem ich bei null angefangen habe

 

[mihe7]

Ich denke nicht, dass sich das Problem durch den Einsatz eines Frameworks erledigt. Das sind ja doch schlicht Grundlagen um die es hier geht. Aber wer weiß, vielleicht hilft es Dir ja, wenn Du auf die Unterstützung eines Frameworks zurückgreifen kannst - und sei es nur die Dokumentation.

 

[Oneixee5]

Ich denke nicht, dass sich das Problem durch den Einsatz eines Frameworks erledigt. Das sind ja doch schlicht Grundlagen um die es hier geht. Aber wer weiß, vielleicht hilft es Dir ja, wenn Du auf die Unterstützung eines Frameworks zurückgreifen kannst - und sei es nur die Dokumentation.

Ich meinte nicht das konkrete Problem, es stimmt das sind einfach Grundlagen. Ich meinte die Art und Weise wie hier an das Projekt herangegangen wird. Dieses plain Vanilla Javascript - es ist mittlerweile Konsens, dass das unwartbar ist, wenn es mal etwas mehr als 25 Zeilen werden. Die starren ID's, die Verwendung von ID's und Klassen als Selectoren... Die kleinste Änderung führt zu einer nicht funktionierenden Anwendung, ohne das man einen Compiler oder ähnliches hätte, was den Entwickler auf Probleme hinweisen würde. OK es gibt IDE's, die erkennen ob bspw. ein Link funktioniert - das funktioniert aber meistens eher schlecht als recht.

 

[kay86]

Ich meinte nicht das konkrete Problem, es stimmt das sind einfach Grundlagen. Ich meinte die Art und Weise wie hier an das Projekt herangegangen wird. Dieses plain Vanilla Javascript - es ist mittlerweile Konsens, dass das unwartbar ist, wenn es mal etwas mehr als 25 Zeilen werden. Die starren ID's, die Verwendung von ID's und Klassen als Selectoren... Die kleinste Änderung führt zu einer nicht funktionierenden Anwendung, ohne das man einen Compiler oder ähnliches hätte, was den Entwickler auf Probleme hinweisen würde. OK es gibt IDE's, die erkennen ob bspw. ein Link funktioniert - das funktioniert aber meistens eher schlecht als recht.

Danke für Deinen offenen und ausführlichen Beitrag, den ich sehr schätze. Mein Wissen beschränkt sich nur auf mein Projekt, denn ich bin kein CSS-, HTML- oder Java-Skript-Experte. Ich bin eher autodidaktisch veranlagt und habe durch viel Scheitern und Ausprobieren und belesen das Ganze umgesetzt.

Wenn ich also nachträglich teile, mein Projekt in die Framework-Umgebung (so nenne ich das jetzt mal) indigniere für eine leichtere Wartbarkeit, dann denke ich, dass ich es lieber jemanden machen lasse, der mehr Ahnung davon hat als ich.

Inzwischen habe ich alles zum Laufen bekommen!

https://codepen.io/Kay-Siebke/pen/PwYwmNL

 

[kay86]

ich habe mir deinen Rat zu Herzen genommen und versuche gerade das Ganze in Framework umzusetzen, so wie das Ganze mit data atriebuten zu realisieren. Der Inhalt wird schon mal angezeigt, aber die Übersetzung funktioniert noch nicht und der Inhalt wird noch nicht ausgeblendet
https://codepen.io/Kay-Siebke/pen/WbeexjK.

 

[Oneixee5]

Welches Framework verwendest du denn?

 

[Oneixee5]

Ich habe mal ein kleines Beispiel in Vue.js gebaut.
Im Bereich 'template' steht das HTML. dort gibt es dann einen eigen Tag: buttons-comp -das ist ein Vue-Component, welche die Buttons und deren Funktion kapselt. Diese Component hat Attribut v-model, v-model ist reaktiv - man benötigt keine Listener oä. Wird ein Button gedrückt, dann ändert sich also 'selectedLang' - das übergibt man dann an andere HTML-Elemente und kann dann dort den Wert anzeigen: {{selectedLang}} oder als CSS-Klasse verwenden: :class="['mb', selectedLang]" oder ... Es kann auch im Scriptbereich reagiert werden wenn sich ein Wert ändert:
const lang = computed(() => transalations[selectedLang.value]);
Komponenten können also aus dem zugehörigem HTML, CSS, und Java- bzw. TypeScript bestehen. Alle HTML-Eigenschaften/-Attribute usw. funktionieren nach wie vor. Komponenten helfen alles sauber zu strukturieren und es gibt so eine Art Kompilermeldung wenn etwas nicht funktioniert. Viele IDE's unterstützen die Anzeige von Attributen und möglichen Werten, Dokumentaion usw.
Das Beispiel ist jetzt nicht perfekt, ich wollte es einfach halten und trotzdem ein paar Möglichkeiten zeigen.

 

[kay86]

Danke ich habe mir Ihr Muster mal kopiert.

 

[mihe7]

Die kleinste Änderung führt zu einer nicht funktionierenden Anwendung, ohne das man einen Compiler oder ähnliches hätte, was den Entwickler auf Probleme hinweisen würde.

Das ist in der Tat ein Problem bei Skriptsprachen. Andererseits kann doch vieles sauber per Web-Components mit plain JS gelöst werden, wobei ich dazusagen muss, dass ich auch nicht der JS-Crack bin. Den Vorteil von Frameworks sehe ich eher in der Sicherstellung der Funktion in diversen Browsern, einheitlichen APIs für bestimmte Funktionen und, wenn man's braucht, dem bidirektionalen Binding auf das Model. Außerdem geben sie in der Regal auch eine gewisse Struktur vor. Nachteilig ist halt, dass man das Framework lernen muss und man bei der Wahl des Frameworks (bzw. der Version...) auch Pech haben kann und mit einem Framework in der Regel auch ein "build" notwendig wird.

@kay86, lass Dich von mir nicht verwirren und hör auf @Oneixee5, der hat da mehr Expertise als ich.

 

[kay86]

Danke für deine ausführlichen Beitrag.Ja ich muss schon zugeben daß das Thema Framework meine Fähigkeiten übersteigt.weshalb ich es lieber denen überlasse die sich besser damit auskennen.

 

[kay86]

Ich habe mal ein kleines Beispiel in Vue.js gebaut.
Im Bereich 'template' steht das HTML. dort gibt es dann einen eigen Tag: buttons-comp -das ist ein Vue-Component, welche die Buttons und deren Funktion kapselt. Diese Component hat Attribut v-model, v-model ist reaktiv - man benötigt keine Listener oä. Wird ein Button gedrückt, dann ändert sich also 'selectedLang' - das übergibt man dann an andere HTML-Elemente und kann dann dort den Wert anzeigen: {{selectedLang}} oder als CSS-Klasse verwenden: :class="['mb', selectedLang]" oder ... Es kann auch im Scriptbereich reagiert werden wenn sich ein Wert ändert:
const lang = computed(() => transalations[selectedLang.value]);
Komponenten können also aus dem zugehörigem HTML, CSS, und Java- bzw. TypeScript bestehen. Alle HTML-Eigenschaften/-Attribute usw. funktionieren nach wie vor. Komponenten helfen alles sauber zu strukturieren und es gibt so eine Art Kompilermeldung wenn etwas nicht funktioniert. Viele IDE's unterstützen die Anzeige von Attributen und möglichen Werten, Dokumentaion usw.
Das Beispiel ist jetzt nicht perfekt, ich wollte es einfach halten und trotzdem ein paar Möglichkeiten zeigen.

ich habe mich mal auf Ihrem Vue SFC Playground etwas ausprobiert, auch wenn ich noch nicht alles verstehe.

<script setup>
import { ref, computed } from 'vue'
import ButtonsComp from './ButtonsComp.vue';

const selectedLang = ref("DE");

const translations = {
    DE: {
      description: "Beschreibung",
      color: "Farbe",
      size: "Größe",
      submit: "Absenden",
      reset: "Zurücksetzen",
      print: "Drucken",
      autoReset: "Auto-Reset",
      faultySwitch: "Faulty Label",
      autoDisplay: "Auto Display",
      guideTitle: "Benutzeranleitung für das Formular",
      guideIntro:  "Dieses Formular dient zur Eingabe und Verwaltung von Produktdaten wie SKU, Beschreibung, Farbe und Größe. Folgen Sie den Anweisungen, um Daten korrekt zu erfassen.",
      formFieldsTitle: "Formularfelder",
      languageSelection:  "Sprache: Wählen Sie Deutsch (DE), Englisch (EN) oder Polnisch (PL). Die Sprache beeinflusst alle Beschriftungen.",
      fieldSku: "<strong>SKU:</strong> Geben Sie die Produktnummer ein.",
      fieldDescription: "<strong>Beschreibung:</strong> Erfassen Sie eine kurze Produktbeschreibung.",
      fieldColorSize: "<strong>Farbe & Größe:</strong> Tragen Sie Farbe und Größe des Produkts in die entsprechenden Felder ein.",
      buttonsShortcutsTitle: "Schaltflächen und Tastenkombinationen",
      shortcutSubmit:  "<b>Submit-Button:</b> speichert die eingegebenen Daten, wenn alle Pflichtfelder ausgefüllt sind. Tastenkombination: <strong>Enter</strong>.",
      shortcutReset:  "<strong>Reset-Button:</strong> Löscht alle Eingaben und setzt das Formular zurück. Tastenkombination: <strong>Alt + R</strong>.",
      shortcutPrint:  "<strong>Print Button:</strong> Öffnet die Druckvorschau des Formulars. Tastenkombination: <strong>Ctrl + P</strong>.",
      additionalFunctionsTitle: "Zusatzfunktionen",
      autoResetOn:  "<strong>Ein:</strong> Formular wird nach Absenden automatisch zurückgesetzt.",
      autoResetOff: "<strong>Aus:</strong> Eingaben bleiben erhalten.",
      autoInput: "<strong>Auto Eingabe:</strong>",
      autoInputOn: "<strong>Ein:</strong> Produktdaten werden automatisch befüllt, wenn verfügbar.",
      autoInputOff: "<strong>Aus:</strong> Manuelle Eingabe erforderlich.",
      faulty: "<strong>Faulty:</strong>",
      faultyActivate:  "Aktivieren Sie diesen Schalter, um ein Produkt als fehlerhaft zu kennzeichnen.",
      screenModesTitle: "Bildschirmmodi",
      portraitMode:  "<strong>Hochformat:</strong> Vertikale Anordnung, geeignet für mobile Geräte.",
      landscapeMode: "<strong>Querformat:</strong> Breitere Ansicht mit Info-Feld neben den Eingabefeldern.",
      layoutNote:  "Hinweis: Das Layout passt sich automatisch an die Bildschirmgröße an."
    },
 
    DE: {
      description: "Description",
      color: "Color",
      size: "Size",
      submit: "Submit",
      reset: "Reset",
      print: "Print",
      autoReset: "Auto-Reset",
      faultySwitch: "Faulty Label",
      autoDisplay: "Auto Display",
      guideTitle: "User Guide for the Form",
      guideIntro:  "This form is used to enter and manage product data such as SKU, description, color, and size. Follow the instructions to correctly input the data.",
      formFieldsTitle: "Form Fields",
      languageSelection:  "Language: Select German (DE), English (EN), or Polish (PL). The language affects all labels.",
      fieldSku: "<strong>SKU:</strong> Enter the product number.",
      fieldDescription: "<strong>Description:</strong> Enter a brief product description.",
      fieldColorSize:  "<strong>Color & Size:</strong> Enter the product's color and size in the appropriate fields.",
      buttonsShortcutsTitle: "Buttons and Keyboard Shortcuts",
      shortcutSubmit:  "<b>Submit Button:</b> Saves the entered data when all required fields are filled. Keyboard shortcut: <strong>Enter</strong>.",
      shortcutReset:  "<strong>Reset Button:</strong> Clears all inputs and resets the form. Keyboard shortcut: <strong>Alt + R</strong>.",
      shortcutPrint:  "<strong>Print Button:</strong> Opens the print preview of the form. Keyboard shortcut: <strong>Ctrl + P</strong>.",
      additionalFunctionsTitle: "Additional Functions",
      autoResetOn:  "<strong>On:</strong> The form resets automatically after submission.",
      autoResetOff: "<strong>Off:</strong> Data remains unchanged.",
      autoInput: "<strong>Auto Input:</strong>",
      autoInputOn:  "<strong>On:</strong> Product data is auto-filled when available.",
      autoInputOff: "<strong>Off:</strong> Manual input is required.",
      faulty: "<strong>Faulty:</strong>",
      faultyActivate: "Activate this switch to mark a product as faulty.",
      screenModesTitle: "Screen Modes",
      portraitMode:  "<strong>Portrait:</strong> Vertical layout, suitable for mobile devices.",
      landscapeMode: "<strong>Landscape:</strong> Wider view with the info box next to the input fields.",
      layoutNote: "Note: The layout adjusts automatically to the screen size."
    },
 
    PL: {
      description: "Opis",
      color: "Kolor",
      size: "Rozmiar",
      submit: "Zatwierdź",
      reset: "Resetuj",
      print: "Drukuj",
      autoReset: "Autoreset",
      faultySwitch: "Wadliwe",
      autoDisplay: "Autouzupełnianie",
      guideTitle: "Instrukcja użytkownika formularza",
      guideIntro:  "Ten formularz służy do wprowadzania i zarządzania danymi produktów, takimi jak SKU, opis, kolor i rozmiar. Postępuj zgodnie z instrukcjami, aby prawidłowo wprowadzić dane.",
      formFieldsTitle: "Pola formularza",
      languageSelection:  "Język: Wybierz niemiecki (DE), angielski (EN) lub polski (PL). Język wpływa na wszystkie etykiety.",
      fieldSku: "<strong>SKU:</strong> Wprowadź numer produktu.",
      fieldDescription: "<strong>Opis:</strong> Wprowadź krótki opis produktu.",
      fieldColorSize:  "<strong>Kolor i rozmiar:</strong> Wprowadź kolor i rozmiar produktu w odpowiednich polach.",
      buttonsShortcutsTitle: "Przyciski i skróty klawiszowe",
      shortcutSubmit:  "<b>Przycisk Zatwierdź:</b> zapisuje wprowadzone dane, jeśli wszystkie wymagane pola są wypełnione. Skrót klawiszowy: <strong>Enter</strong>.",
      shortcutReset:  "<strong>Przycisk Resetuj:</strong> usuwa wszystkie wpisane dane i resetuje formularz. Skrót klawiszowy: <strong>Alt + R</strong>.",
      shortcutPrint:  "<strong>Przycisk Drukuj:</strong> otwiera podgląd wydruku formularza. Skrót klawiszowy: <strong>Ctrl + P</strong>.",
      additionalFunctionsTitle: "Funkcje dodatkowe",
      autoResetOn:  "<strong>Włącz:</strong> Formularz zostanie automatycznie zresetowany po zatwierdzeniu.",
      autoResetOff: "<strong>Wyłącz:</strong> Dane pozostaną bez zmian.",
      faulty: "<strong>Nieprawidłowy:</strong>",
      faultyActivate:  "Włącz ten przełącznik, aby oznaczyć produkt jako nieprawidłowy.",
      screenModesTitle: "Tryby ekranu",
      portraitMode:  "<strong>Tryb pionowy:</strong> Układ pionowy, odpowiedni dla urządzeń mobilnych.",
      landscapeMode:  "<strong>Tryb poziomy:</strong> Szeroki widok z polem informacji obok pól formularza.",
      layoutNote: "Uwaga: Układ automatycznie dostosowuje się do rozmiaru ekranu."
    }
  };
 

const lang = computed(() => translations[selectedLang.value]);
</script>

<style scoped>
.mb {
  font-size: 9px;
  margin-bottom: 30px;
}

.DE {
  background-color: chartreuse;
}

.EN {
  background-color: chocolate;
}

.PL {
  background-color: aqua;
}
</style>

<template>
  <div :class="['mb', selectedLang]">Gewählte Sprache: {{ selectedLang }}</div>

  <buttons-comp v-model="selectedLang"/>

  <h2>{{ lang.guideTitle }}</h2>
  <p>{{ lang.guideIntro }}</p>

  <h3>{{ lang.formFieldsTitle }}</h3>
  <p>{{ lang.languageSelection }}</p>
  <ul>
    <li v-html="lang.fieldSku"></li>
    <li v-html="lang.fieldDescription"></li>
    <li v-html="lang.fieldColorSize"></li>
  </ul>

  <h3>{{ lang.buttonsShortcutsTitle }}</h3>
  <ul>
    <li v-html="lang.shortcutSubmit"></li>
    <li v-html="lang.shortcutReset"></li>
    <li v-html="lang.shortcutPrint"></li>
  </ul>

  <h3>{{ lang.additionalFunctionsTitle }}</h3>
  <p>{{ lang.autoReset }}</p>
  <ul>
    <li v-html="lang.autoResetOn"></li>
    <li v-html="lang.autoResetOff"></li>
  </ul>

  <p v-html="lang.autoInput"></p>
  <ul>
    <li v-html="lang.autoInputOn"></li>
    <li v-html="lang.autoInputOff"></li>
  </ul>

  <p v-html="lang.faulty"></p>
  <ul>
    <li v-html="lang.faultyActivate"></li>
  </ul>

  <h3>{{ lang.screenModesTitle }}</h3>
  <ul>
    <li v-html="lang.portraitMode"></li>
    <li v-html="lang.landscapeMode"></li>
  </ul>

  <p>{{ lang.layoutNote }}</p>
</template>

 

[Oneixee5]

v-html -> nicht benutzen: Pages where users can somehow dictate the content that is included with v-html, are at risk of Cross-site scripting (XSS) attacks.

Die 'const translations' würde man bspw. in ein module packen und dann importieren. So wäre dann der Code nicht so aufgebläht und man könnte das Modul dann an vielen Stellen verwenden. Noch besser wäre als i18n-Datei aber das ist dann schon ein Level weiter: https://vue-i18n.intlify.dev/

Die Spracheinstellung würde man zentral Speichern, evtl. im sessionStorage, so wäre die auch überall verfügbar. Es gibt dafür auch noch andere Möglichkeiten. (https://pinia.vuejs.org/)

Dann könnte man hingehen und schauen was so logisch oder fachlich zusammengehört und Komponenten daraus machen. Diese kann man dann leicht wiederverwenden. Bspw. die Button zur Sprachwahl könnten man auf der Seite oben und unten anzeigen. Oder die Form in eine Komponente packen, so das man die Validierung zusammen mit der Form kapselt. Das schafft Übersicht.

Noch besser funktioniert das, wenn man dann statt JavaScript -> TypeScript verwendet. Dann sind die Parameter und Rückgaben nicht einfach irgendwelchen nichtssagenden Variablen, sondern haben ein konkreten Typ. Der Kompiler TSC kann dann genau sagen wo ein Fehler sein könnte.

<script setup lang="ts">
  const model = defineModel<"DE"|"EN"|"PL">();
</script>

Hier ist bspw. immer sichergestellt, das in dem 'model' nur die Werte "DE", "EN" oder "PL" enthalten sein können - kein null oder undefined. Würde da einer "Horst" reinschreiben (wäre in JS problemlos möglich) oder wäre der Wert irgendwo undefined, dann würde tsc einen Fehler anzeigen. Man erreicht also fast eine Typsicherheit wie in Java.

 

[kay86]

Boh sorry da komme ich nicht ganz mit bei dieser fachlichen Erläuterung ,da muß ich schon mehrfach ihr Text lesen um überhaupt Schritte halten zu können aber

Bei der Sprachauswahl(Button ),wie bekomme ich meine Flaggen wider ?

 

[Oneixee5]

Bei der Sprachauswahl(Button ),wie bekomme ich meine Flaggen wider ?

Ich verstehe die Frage nicht!

Inzwischen habe ich alles zum Laufen bekommen!