Isabell Fock: Problem: HTML Dropdown-Menü und JS

SELF-Forum

Problem: HTML Dropdown-Menü und JS

Isabell Fock
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich habe leider ein kleines Problem mit meinem HTML und Java script Code.

Und zwar hätte ich gerne ein Dropdown-Menü, in dem ich Sprachen auswählen kann. Wenn ich z.B. Englisch auswählen, soll ein Feld aufgehen in dem englischer text inklusuve HTML, CSS und JS Code. Und wenn ich eine andere Sprache wähle soll statt dem Englischen Feld ein anderes auf gehen.

Ich dachte mit dem Code, wie er unten zu sehen ist und dem JS Befehl " document.getElementById("head").innerHTML = "Englischer Text hier"; " würde es gehen. Leider kann ich dann eben nur Text einfügen und keine neuen HTML, CSS oder JS Codes :(

Meine Idee ob es mit einem fieldset gehen könnte? Allerdings weiß ich nicht wie ich mit der ausgewählte Sprache (also den valua oder id??) dann das jeweilige fieldset auswählen kann...weil so wie ich es bisher gemacht habe, ist die ID "Englisch" nur im Java Script zugänglich und nicht mehr im HTML....oder gibt es dafür einen ganz anderen Ansatz, mit dem es funktioniert?

Ich würde mich über eure Hilfe sehr freuen...

Viele Grüße

Hier noch mein Code:

<!DOCTYPE html>
<html>
<body>

<p>Please select your language</p>

<select id="mySelect" onchange="myFunction()">
  <option value="Deutsch">Deutsch
  <option value="English">English
  <option value="Espanol">Espanol
  <option value="Italian">Italian
</select>


<p id="head"></p>

<p id="footer"></p>

<script>
function myFunction() {
    var x = document.getElementById("mySelect").value;

if (x == "Deutsch"){
    document.getElementById("head").innerHTML = "HEAD Hier steht deutsches";

    document.getElementById("footer").innerHTML = "FOOTER Hier steht deutsches";
}

if (x == "English"){
    document.getElementById("head").innerHTML = "HEAD this could be english text";

    document.getElementById("footer").innerHTML = "FOOTER this could be english text";
}

if (x == "Espanol"){
    document.getElementById("head").innerHTML = "HEAD espanol text hier";

    document.getElementById("footer").innerHTML = "FOOTER espanol text hier";
}

if (x == "Italian"){
    document.getElementById("head").innerHTML = "HEAD italian text hier";

    document.getElementById("footer").innerHTML = "FOOTER italian text hier";
}

}
</script>


 <fieldset class="klassenbezeichnung" id="id_fieldset">
    Hier könnte HTML und JS stehen
</fieldset>

</body>
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Problem: HTML Dropdown-Menü und JS

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Isabell Fock

    Und zwar hätte ich gerne ein Dropdown-Menü, in dem ich Sprachen auswählen kann.

    Nicht die beste Idee.

    Außerdem sollte der Nutzer i.A. die Sprache nicht selbst auswählen müssen, sondern das sollte automatisch geschehen.

    Mit JavaScript kommt man nicht an die bevorzugte(n) Sprache(n) des Nutzers heran. JavaScript ist also hier keine gute Technologie.

    " document.getElementById("head").innerHTML = "Englischer Text hier"; " würde es gehen. Leider kann ich dann eben nur Text einfügen und keine neuen HTML, CSS oder JS Codes :(

    Nein, mit innerHTML kann man nicht nur einfachen Text, sondern – wie der Name der Methode schon sagt – auch Markup einfügen.

    LLAP 🖖

    --
    Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Problem: HTML Dropdown-Menü und JS

      Isabell Fock
      – Informationen zu den Bewertungsregeln

      @@Gunnar Bittersmann

      Vielen Dank für die schnelle Antwort.

      Leider benötige ich die Auswahl durch Dropdown zwingend. Eine automatische Auswahl ist für meinen Anwendungsfall nicht ausreichend.

      "document.getElementById("head").innerHTML = "Englischer Text hier"; "

      Ok, wenn es funktionoeren sollte mit html, css und js, warum funktioniert der Code dann z.B. schon micht mehr, wenn ich hier nur zwischen 'Englischer' und 'Text' einen Absatz mache?

      Vielen Dank schonmal im voraus für eure Hilfe!

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Problem: HTML Dropdown-Menü und JS

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Isabell Fock

        Leider benötige ich die Auswahl durch Dropdown zwingend.

        Auswahl ja, durch Dropdown nein.

        Eine automatische Auswahl ist für meinen Anwendungsfall nicht ausreichend.

        Natürlich nicht. Genau das sagt ja auch der Artikel: „fast immer, aber nicht ausschließlich.“

        Dass automatische Sprachvereinbarung für einige wenige Nutzer nicht das richtige Ergebnis liefert, ist kein Grund, sie nicht zu implementieren. Für die allermeisten Nutzer liefert sie nämlich das richtige Ergebnis und es bleibt den Nutzern erspart, selbst die Sprache umschalten zu müssen.

        warum funktioniert der Code dann z.B. schon micht mehr, wenn ich hier nur zwischen 'Englischer' und 'Text' einen Absatz mache?

        Weil ein Zeilenumbruch in JavaScript eine Anweisung beendet.

        document.getElementById("head").innerHTML = "Englischer
Text hier";

        wäre gleichbedeutend mit

        document.getElementById("head").innerHTML = "Englischer;
Text hier";

        Und weil nach Englischer kein " steht, wird in der Fehlerkonsole der Syntaxfehler angemeckert: unterminated string literal.

        LLAP 🖖

        --
        Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln