• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Suche Möglichkeit acht Wörter in drei Sprachen zu übersetzen

Guck mal auf den Screenshot von Sempervivum, ansonsten kannst du einfach mit Rechtsklick "untersuchen" in der Console dir die Fehler anzeigen lassen!
 
Zuletzt bearbeitet:
Werbung:
Der Fehler liegt hier:
Sempervivum schrieb:
Code: 
<script>
  < /div>
  // Labels fest legen:
 
   <script>
Zum Vergrößern anklicken....
Nicht nur da. Da sind etliche Schachtelungen kaputt. Und anderes.
  • Hinter dem size-Eingabefeld steht ein </form> Tag. Durch dieses Tag sind die Buttons außerhalb des <form> und werden deshalb vom Sprachscript nicht erfasst
  • Offensichtlich sollen die Buttons außerhalb des Formulars stehen, damit sie das Form nicht eigentständig beeinflussen. Ich würde anmerken wollen, dass dadurch die Zugänglichkeit (die Zugehörigkeit der Buttons zum Form ist nicht erkennbar) und Bedienbarkeit (ENTER-Taste im Form funktioniert nicht) unangenehm beeinflusst werden. Besser wäre
    • Submit- und Reset-Button ins Form hinein, als <button id="submit" type="submit">Submit</button> und <button id="reset" type="reset">Reset</button> Das Button-Element ist besser als <input type="button">, weil sich damit Value und Text getrennt festlegen lassen. Und weil die vorgeschlagene Sprachanpassung dann ohne Sonderbehandlung funktioniert.
    • Keinen onclick-Handler auf dem submit-Button. Statt dessen onsubmit="submitForm(event)" auf dem form-Element. Der Reset-Button braucht kein onclick, wenn er type="reset" hat und im Form sitzt
    • In der submitForm-Funktion das event entgegennehmen (also function submitForm(event) und dann event.preventDefault() aufrufen, damit der Browser das Form nicht selbst abschickt
  • Das <label> Element vom onoffswitch wird nicht geschlossen
  • Dahinter steht ein weiteres </form>. Folgt man meinem Verbesserungsvorschlag oben, ist es hier richtig. Folgt man ihm nicht, muss es weg.
  • Da ist ein <div align="center"> ohne Inhalt und mit einem img-Tag, dem die rechte spitze Klammer fehlt
  • Dem <select> für die Sprache fehlt das </select> Statt dessen steht da </script>, es ist aber kein script-Element offen
  • Dieser Teil wiederholt sich?! Möglicherweise ist also das unvollständige img-Tag und das </script> eine unvollständige Kopie des Original-Quelltexts.
  • Hinter dem zweiten <select>-Versuch steht <script>, ohne dass Script folgt, und </div> dessen öffnendes <div> fehlt oder nicht gezeigt wird. Steht das so im Original oder wurde unvollständig kopiert?
  • Das labels-Objekt im Script, das die Sprachbegriffe festlegt, ist kein JSON-String, TK. Es ist einfach ein JavaScript Objektliteral. Richtig gesagt hast Du: Keys, die eine Leerstelle enthalten, brauchen Anführungszeichen (also "auto reset") und hinter jedem key-value Paar muss ein Komma stehen. Hinter dem letzten Eintrag kann ein Komma stehen, muss aber nicht. Das ist im PL-Teil falsch. Vor allem ist dort "auto reset" doppelt. Und es ist sinnlos, weil es kein Element mit der ID "auto reset" gibt. Was vor den Doppelpunkten steht, muss als ID im HTML angegeben sein. Eine Leerstelle in einer ID ist - in HTML 5 - kein Problem.
  • Die Rückmeldung "Sorry, da stehe ich jetzt voll auf dem Schlauch" zeigt übrigens, wie sinnlos es ist, jemandem JavaScript-Code zu schenken, der kein JavaScript kann. Entweder verwendet man Homepage-Baukästen, oder lernt den Job gründlich. Dazu gibt's genug Onlinequellen. Copy+Paste, ohne zu verstehen, was man kopiert, ist ein Patentrezept, um zu scheitern.
Rolf
 
Rolf B schrieb:
  • Die Rückmeldung "Sorry, da stehe ich jetzt voll auf dem Schlauch" zeigt übrigens, wie sinnlos es ist, jemandem JavaScript-Code zu schenken, der kein JavaScript kann. Entweder verwendet man Homepage-Baukästen, oder lernt den Job gründlich. Dazu gibt's genug Onlinequellen. Copy+Paste, ohne zu verstehen, was man kopiert, ist ein Patentrezept, um zu scheitern.
Zum Vergrößern anklicken....
Bis auf den Homepage-Baukästen volle Zustimmung.
 
Werbung:
Rolf B schrieb:
Der Fehler liegt hier:

Nicht nur da. Da sind etliche Schachtelungen kaputt. Und anderes.
  • Hinter dem size-Eingabefeld steht ein </form> Tag. Durch dieses Tag sind die Buttons außerhalb des <form> und werden deshalb vom Sprachscript nicht erfasst
  • Offensichtlich sollen die Buttons außerhalb des Formulars stehen, damit sie das Form nicht eigentständig beeinflussen. Ich würde anmerken wollen, dass dadurch die Zugänglichkeit (die Zugehörigkeit der Buttons zum Form ist nicht erkennbar) und Bedienbarkeit (ENTER-Taste im Form funktioniert nicht) unangenehm beeinflusst werden. Besser wäre
    • Submit- und Reset-Button ins Form hinein, als <button id="submit" type="submit">Submit</button> und <button id="reset" type="reset">Reset</button> Das Button-Element ist besser als <input type="button">, weil sich damit Value und Text getrennt festlegen lassen. Und weil die vorgeschlagene Sprachanpassung dann ohne Sonderbehandlung funktioniert.
    • Keinen onclick-Handler auf dem submit-Button. Statt dessen onsubmit="submitForm(event)" auf dem form-Element. Der Reset-Button braucht kein onclick, wenn er type="reset" hat und im Form sitzt
    • In der submitForm-Funktion das event entgegennehmen (also function submitForm(event) und dann event.preventDefault() aufrufen, damit der Browser das Form nicht selbst abschickt
  • Das <label> Element vom onoffswitch wird nicht geschlossen
  • Dahinter steht ein weiteres </form>. Folgt man meinem Verbesserungsvorschlag oben, ist es hier richtig. Folgt man ihm nicht, muss es weg.
  • Da ist ein <div align="center"> ohne Inhalt und mit einem img-Tag, dem die rechte spitze Klammer fehlt
  • Dem <select> für die Sprache fehlt das </select> Statt dessen steht da </script>, es ist aber kein script-Element offen
  • Dieser Teil wiederholt sich?! Möglicherweise ist also das unvollständige img-Tag und das </script> eine unvollständige Kopie des Original-Quelltexts.
  • Hinter dem zweiten <select>-Versuch steht <script>, ohne dass Script folgt, und </div> dessen öffnendes <div> fehlt oder nicht gezeigt wird. Steht das so im Original oder wurde unvollständig kopiert?
  • Das labels-Objekt im Script, das die Sprachbegriffe festlegt, ist kein JSON-String, TK. Es ist einfach ein JavaScript Objektliteral. Richtig gesagt hast Du: Keys, die eine Leerstelle enthalten, brauchen Anführungszeichen (also "auto reset") und hinter jedem key-value Paar muss ein Komma stehen. Hinter dem letzten Eintrag kann ein Komma stehen, muss aber nicht. Das ist im PL-Teil falsch. Vor allem ist dort "auto reset" doppelt. Und es ist sinnlos, weil es kein Element mit der ID "auto reset" gibt. Was vor den Doppelpunkten steht, muss als ID im HTML angegeben sein. Eine Leerstelle in einer ID ist - in HTML 5 - kein Problem.
  • Die Rückmeldung "Sorry, da stehe ich jetzt voll auf dem Schlauch" zeigt übrigens, wie sinnlos es ist, jemandem JavaScript-Code zu schenken, der kein JavaScript kann. Entweder verwendet man Homepage-Baukästen, oder lernt den Job gründlich. Dazu gibt's genug Onlinequellen. Copy+Paste, ohne zu verstehen, was man kopiert, ist ein Patentrezept, um zu scheitern.
Rolf
Zum Vergrößern anklicken....
Danke Rolf für Ihr Beanstandung an meinen Fehlern, das schätze ich sehr den ich bin, ein offener Mensch, den jeder fängt mal auf die eine oder andere weise an. Ich fange eben an, indem ich unbewusst Fehler mache, den wie heißt es, so schön aus Fehlern lernt man (Hoffentlich). Dies ist mein erstes Projekt dieser Art.

Aber hier komme ich nicht ganz mit bei ihrer Beschreibung:
Code: 
<form>
    <div class="controls">
     <button id="submit" type="submit">Submit</button>
         <button id="reset" type="reset">Reset</button>
  </form>

Ich frage ungern, aber könnten sie es vervollständigen :frown:
 
Die Buttons sind so ok. Die IDs können jetzt in dem Vokabel-Objekt eingetragen werden, das Sempervivum vorgeschlagen hat, und dann Bezeichnungen für DE, EN und PL vergeben werden.

Es muss aber noch ein Eventhandler registriert werden, der das submit-Event behandelt. Dieser Eventhandler gehört aber auf das Form, nicht auf den Submit-Button. Man kann das mit der addEventListener-Funktion machen, oder mit einem onsubmit-Attribut. Ich deute hier nur an, was gebaut werden muss - du musst das dann passend für deine Seite anwenden. Copy+Paste Code gibt's von mir nicht.

HTML: 
<form onsubmit="submitForm(event)">
    ...
</form>
...
<script>
function submitForm(event) {
    ... (Google Logik)
    event.preventDefault();
}
</script>

Der preventDefault-Aufruf verhindert, dass der Browser das Formular selbst nochmal zum Server sendet. Das tust Du ja bereits in der submitForm Methode selbst.

Rolf
 
Werbung:
@kaysiebke
Was den Submit- und Reset-Button betrifft, so ist das ein Teil deines Codes, der einwandfrei funktioniert. Also alles gut und kein Grund, hier eine Baustelle aufzumachen.
Besser das wichtigste zuerst angehen und das sind die Syntaxfehler bei der Definition der Labels: Es fehlen die Kommas und die Leerzeichen bei den Schlüsseln dürfen nicht sein. So wäre es richtig:
Code: 
    <script>
        // Labels fest legen:
        const labels = {
            EN: {
                // Links vom Doppelpunkt: Die ID des Inputs bzw.
                // der Wert des for-Attributs des Labels
                // Rechts vom Doppelpunkt: Die Beschriftung
                description: 'Description',
                color: 'Color',
                size: 'Size',
                reset: 'Reset',//<input type="button"
                //submit: 'Submit',//<input type="button"
                //details: 'Item Details',
                autoreset: 'Auto Reset'//<input type="button"
            },
            DE: {
                description: 'Beschreibung',
                color: 'Farbe',
                size: 'Größe',
                reset: 'Zurücksetzen ', //<input type="button"
                // submit: 'Einreichen',//<input type="button"
                //details: 'Item Details',
                autoreset: 'Automatisches Zurücksetzen'//<input type="button"
                // usw.
            },
            PL: {
                description: 'Opis',
                color: 'Kolor',
                size: 'Rozmiar',
                reset: 'automatyczny reset', //<input type="button"
                //submit: 'Składać',//<input type="button"
                //details: 'Item Details',
                autoreset: 'automatyczny reset',//<input type="button"
                // usw.
            }
        }
        theForm = document.querySelector('#itemForm');
        // Eventlistener für "change" für das window-Objekt registrieren:
        window.addEventListener('change', event => {
            // Hat sich der Zustand einer Checkbox für die
            // Auswahl der Sprache geändert?
            if (event.target.name = 'lang-choose') {
                const
                    // Die Liste der Beschriftungen für die gewählte
                    // Sprache bereit stellen:
                    labelList = labels[event.target.value];
                // Über die Beschriftungen in der Liste:
                for (id in labelList) {
                    // Im Label, das als for-Attribut die aktuelle ID hat
                    // die Beschriftung auf den Wert des Eintrags setzen:
                    theForm.querySelector(`label[for="${id}"]`).textContent = labelList[id];
                }
            }
        });
    </script>
Dann sind die Syntaxfehler raus und die Sprachumschaltung funktioniert.
Allerdings funktioniert diese dann in der Form für den Reset- und Submit-Button noch nicht, denn diese haben keine Labels. Da muss noch etwas getan werden.
 
Sempervivum schrieb:
@kaysiebke
Was den Submit- und Reset-Button betrifft, so ist das ein Teil deines Codes, der einwandfrei funktioniert. Also alles gut und kein Grund, hier eine Baustelle aufzumachen.
Besser das wichtigste zuerst angehen und das sind die Syntaxfehler bei der Definition der Labels: Es fehlen die Kommas und die Leerzeichen bei den Schlüsseln dürfen nicht sein. So wäre es richtig:
Code: 
    <script>
        // Labels fest legen:
        const labels = {
            EN: {
                // Links vom Doppelpunkt: Die ID des Inputs bzw.
                // der Wert des for-Attributs des Labels
                // Rechts vom Doppelpunkt: Die Beschriftung
                description: 'Description',
                color: 'Color',
                size: 'Size',
                reset: 'Reset',//<input type="button"
                //submit: 'Submit',//<input type="button"
                //details: 'Item Details',
                autoreset: 'Auto Reset'//<input type="button"
            },
            DE: {
                description: 'Beschreibung',
                color: 'Farbe',
                size: 'Größe',
                reset: 'Zurücksetzen ', //<input type="button"
                // submit: 'Einreichen',//<input type="button"
                //details: 'Item Details',
                autoreset: 'Automatisches Zurücksetzen'//<input type="button"
                // usw.
            },
            PL: {
                description: 'Opis',
                color: 'Kolor',
                size: 'Rozmiar',
                reset: 'automatyczny reset', //<input type="button"
                //submit: 'Składać',//<input type="button"
                //details: 'Item Details',
                autoreset: 'automatyczny reset',//<input type="button"
                // usw.
            }
        }
        theForm = document.querySelector('#itemForm');
        // Eventlistener für "change" für das window-Objekt registrieren:
        window.addEventListener('change', event => {
            // Hat sich der Zustand einer Checkbox für die
            // Auswahl der Sprache geändert?
            if (event.target.name = 'lang-choose') {
                const
                    // Die Liste der Beschriftungen für die gewählte
                    // Sprache bereit stellen:
                    labelList = labels[event.target.value];
                // Über die Beschriftungen in der Liste:
                for (id in labelList) {
                    // Im Label, das als for-Attribut die aktuelle ID hat
                    // die Beschriftung auf den Wert des Eintrags setzen:
                    theForm.querySelector(`label[for="${id}"]`).textContent = labelList[id];
                }
            }
        });
    </script>
Dann sind die Syntaxfehler raus und die Sprachumschaltung funktioniert.
Allerdings funktioniert diese dann in der Form für den Reset- und Submit-Button noch nicht, denn diese haben keine Labels. Da muss noch etwas getan werden.
Zum Vergrößern anklicken....
Zu Späte, die Baustele hat Rolf B schon neterweise eröffnet. Ich denke, ich werde das mit den Buttons erstmal begraben. Das übersteigt nun doch meine Fähigkeiten. Wichtig ist erstmal die bestenden fehler auszuräumen und die Buttons in die richtige vorm Zubringen. Ich begnüge mich mit dem, was ich habe!

​

 
Werbung:
Guten Abend @kaysiebke
Ich denke, ich werde das mit den Buttons erstmal begraben.
Zum Vergrößern anklicken....
Wenn sich das auf die Mehrsprachigkeit bezieht, wäre es schade, wenn sie dabei heraus fallen. Es ist nur eine Kleinigkeit, sie zu berücksichtigen:
Code: 
    <script>
        // Labels fest legen:
        const labels = {
            EN: {
                // Links vom Doppelpunkt: Die ID des Inputs bzw.
                // der Wert des for-Attributs des Labels
                // Rechts vom Doppelpunkt: Die Beschriftung
                description: 'Description',
                color: 'Color',
                size: 'Size',
                reset: 'Reset',//<input type="button"
                submit: 'Submit',//<input type="button"
                details: 'Item Details',
                autoreset: 'Auto Reset'//<input type="button"
            },
            DE: {
                description: 'Beschreibung',
                color: 'Farbe',
                size: 'Größe',
                reset: 'Zurücksetzen ', //<input type="button"
                submit: 'Einreichen',//<input type="button"
                details: 'Item Details',
                autoreset: 'Automatisches Zurücksetzen'//<input type="button"
            },
            PL: {
                description: 'Opis',
                color: 'Kolor',
                size: 'Rozmiar',
                reset: 'automatyczny reset', //<input type="button"
                submit: 'Składać',//<input type="button"
                details: 'Item Details',
                autoreset: 'automatyczny reset',//<input type="button"
            }
        }
        theForm = document.querySelector('#itemForm');
        // Eventlistener für "change" für das window-Objekt registrieren:
        window.addEventListener('change', event => {
            // Hat sich der Zustand einer Checkbox für die
            // Auswahl der Sprache geändert?
            if (event.target.name = 'lang-choose') {
                const
                    // Die Liste der Beschriftungen für die gewählte
                    // Sprache bereit stellen:
                    labelList = labels[event.target.value];
                // Über die Beschriftungen in der Liste:
                for (id in labelList) {
                    // Im Label, das als for-Attribut die aktuelle ID hat
                    // die Beschriftung auf den Wert des Eintrags setzen:
                    const lbl = theForm.querySelector(`label[for="${id}"]`);
                    if (lbl) {
                        lbl.textContent = labelList[id];
                    } else {
                        // Es gibt kein Label mit for-Attribut für diese ID,
                        // prüfen ob es einen Button mit der ID gibt:
                        const btn = theForm.querySelector(`input[id="${id}"]`);
                        if (btn) {
                            // Es handelt sich um einen Button,
                            // value-Attribut auf den Wert des Eintrags setzen:
                            btn.value = labelList[id];
                        }
                    }
                }
            }
        });
    </script>
 
Sempervivum schrieb:
Guten Abend @kaysiebke

Wenn sich das auf die Mehrsprachigkeit bezieht, wäre es schade, wenn sie dabei heraus fallen. Es ist nur eine Kleinigkeit, sie zu berücksichtigen:
Code: 
    <script>
        // Labels fest legen:
        const labels = {
            EN: {
                // Links vom Doppelpunkt: Die ID des Inputs bzw.
                // der Wert des for-Attributs des Labels
                // Rechts vom Doppelpunkt: Die Beschriftung
                description: 'Description',
                color: 'Color',
                size: 'Size',
                reset: 'Reset',//<input type="button"
                submit: 'Submit',//<input type="button"
                details: 'Item Details',
                autoreset: 'Auto Reset'//<input type="button"
            },
            DE: {
                description: 'Beschreibung',
                color: 'Farbe',
                size: 'Größe',
                reset: 'Zurücksetzen ', //<input type="button"
                submit: 'Einreichen',//<input type="button"
                details: 'Item Details',
                autoreset: 'Automatisches Zurücksetzen'//<input type="button"
            },
            PL: {
                description: 'Opis',
                color: 'Kolor',
                size: 'Rozmiar',
                reset: 'automatyczny reset', //<input type="button"
                submit: 'Składać',//<input type="button"
                details: 'Item Details',
                autoreset: 'automatyczny reset',//<input type="button"
            }
        }
        theForm = document.querySelector('#itemForm');
        // Eventlistener für "change" für das window-Objekt registrieren:
        window.addEventListener('change', event => {
            // Hat sich der Zustand einer Checkbox für die
            // Auswahl der Sprache geändert?
            if (event.target.name = 'lang-choose') {
                const
                    // Die Liste der Beschriftungen für die gewählte
                    // Sprache bereit stellen:
                    labelList = labels[event.target.value];
                // Über die Beschriftungen in der Liste:
                for (id in labelList) {
                    // Im Label, das als for-Attribut die aktuelle ID hat
                    // die Beschriftung auf den Wert des Eintrags setzen:
                    const lbl = theForm.querySelector(`label[for="${id}"]`);
                    if (lbl) {
                        lbl.textContent = labelList[id];
                    } else {
                        // Es gibt kein Label mit for-Attribut für diese ID,
                        // prüfen ob es einen Button mit der ID gibt:
                        const btn = theForm.querySelector(`input[id="${id}"]`);
                        if (btn) {
                            // Es handelt sich um einen Button,
                            // value-Attribut auf den Wert des Eintrags setzen:
                            btn.value = labelList[id];
                        }
                    }
                }
            }
        });
    </script>
Zum Vergrößern anklicken....
Dann müsste ich aber wie ich Rolf.B verstanden habe das ganze auf onsubmit-Attribut umschreiben und die eventhalter registrieren, damit die Übersetzungsfunktion auch auf die Buttons und dem Switsch Button funktioniert ?
 
Nein, ich habe den Code aus #30 getestet und er funktioniert. Du musst nur darauf achten, dass die Buttons auch die richtigen IDs haben:
Code: 
        <div class="flex-container">
            <input type="button" id="submit" value="Submit" onclick="submitForm()">
            <input type="button" id="reset" value="Reset" onclick="form.reset()">
        </div>
Die Eventhandler haben überhaupt nichts mit der Mehrsprachigkeit zu tun. Versuche es.
Rolf.B hat da eine langatmige Abhandlung geschrieben wovon vieles auf deinen Code oder die Funktion nicht zu trifft. Bedauerlich, dass Du dadurch in die Irre geführt wirst.
 
Zuletzt bearbeitet:
Werbung:
Sempervivum schrieb:
Nein, ich habe den Code aus #30 getestet und er funktioniert. Du musst nur darauf achten, dass die Buttons auch die richtigen IDs haben:
Code: 
        <div class="flex-container">
            <input type="button" id="submit" value="Submit" onclick="submitForm()">
            <input type="button" id="reset" value="Reset" onclick="form.reset()">
        </div>
Die Eventhandler haben überhaupt nichts mit der Mehrsprachigkeit zu tun. Versuche es.
Rolf.B hat da eine langatmige Abhandlung geschrieben wovon vieles auf deinen Code oder die Funktion nicht zu trifft. Bedauerlich, dass Du dadurch in die Irre geführt wirst.
Zum Vergrößern anklicken....
Soweit funktioniert das ganze, nur die Buttons noch nicht(geschrieben auf dem Tablet von der Arbeit)
Code: 
div>
      <div class="flex-container">
            <input type="button1" id="submit" value="Submit" onclick="submitForm()">
            <input type="button2" id="reset" value="Reset" onclick="form.reset()">
            </div>
        Auto Reset  
  <div class="onoffswitch">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="reset-on">
        <label class="onoffswitch-label" for="reset-on">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
        </div>
<script>
   
            }
  </div>
          <script>
            function submitForm() {
              var form = document.getElementById('itemForm');
              var formData = {
                'sku': form.sku.value,
                'color': form.color.value,
                'size': form.size.value,
                'description': form.description.value
              };
              google.script.run.processForm(formData);
              // Prüfen ob das Formular zurück gesetzt werden soll:
              if (document.getElementById('reset-on').checked) {
                form.reset();
                // Auch die Checkbox wurde zurück gesetzt,
                // wir müssen sie neu setzen:
                document.getElementById('reset-on').checked = true;
              }
            }

                </script>
       
            <br>
            <br>
            <img src=//Logo habe ich für hier entfernt (Datenschutz)
          </div>
          <br>
          <br>
          <label>
            <label for="language">Language:</label>
            <select name="language" id="language">
              <option value="EN">EN</option>
              <option value="DE">DE</option>
              <option value="PL">PL</option>
            </select>
         
    <script>
        // Labels fest legen:
        const labels = {
            EN: {
                // Links vom Doppelpunkt: Die ID des Inputs bzw.
                // der Wert des for-Attributs des Labels
                // Rechts vom Doppelpunkt: Die Beschriftung
                description: 'Description',
                color: 'Color',
                size: 'Size',
                reset: 'Reset',//<input type="button"
                submit: 'Submit',//<input type="button"
                details: 'Item Details',
                autoreset: 'Auto Reset'//<input type="button"
            },
            DE: {
                description: 'Beschreibung',
                color: 'Farbe',
                size: 'Größe',
                reset: 'Zurücksetzen ', //<input type="button"
                submit: 'Einreichen',//<input type="button"
                details: 'Item Details',
                autoreset: 'Automatisches Zurücksetzen'//<input type="button"
            },
            PL: {
                description: 'Opis',
                color: 'Kolor',
                size: 'Rozmiar',
                reset: 'automatyczny reset', //<input type="button"
                submit: 'Składać',//<input type="button"
                details: 'Item Details',
                autoreset: 'automatyczny reset',//<input type="button"
            }
        }
        theForm = document.querySelector('#itemForm');
        // Eventlistener für "change" für das window-Objekt registrieren:
        window.addEventListener('change', event => {
            // Hat sich der Zustand einer Checkbox für die
            // Auswahl der Sprache geändert?
            if (event.target.name = 'lang-choose') {
                const
                    // Die Liste der Beschriftungen für die gewählte
                    // Sprache bereit stellen:
                    labelList = labels[event.target.value];
                // Über die Beschriftungen in der Liste:
                for (id in labelList) {
                    // Im Label, das als for-Attribut die aktuelle ID hat
                    // die Beschriftung auf den Wert des Eintrags setzen:
                    const lbl = theForm.querySelector(`label[for="${id}"]`);
                    if (lbl) {
                        lbl.textContent = labelList[id];
                    } else {
                        // Es gibt kein Label mit for-Attribut für diese ID,
                        // prüfen ob es einen Button mit der ID gibt:
                        const btn = theForm.querySelector(`input[id="${id}"]`);
                        if (btn) {
                            // Es handelt sich um einen Button,
                            // value-Attribut auf den Wert des Eintrags setzen:
                            btn.value = labelList[id];
                        }
                    }
                }
            }
        });
    </script>
 
Zuletzt bearbeitet:
Guten Morgen,
leider hast Du einen Fehler immer noch drin, hier:
Code: 
        </div>
<script>
  
            }
  </div>
          <script>
            function submitForm() {
              var form = document.getElementById('itemForm');
              var formData = {
                'sku': form.sku.value,
                'color': form.color.value,
                'size': form.size.value,
                'description': form.description.value
              };
              google.script.run.processForm(formData);
              // Prüfen ob das Formular zurück gesetzt werden soll:
              if (document.getElementById('reset-on').checked) {
                form.reset();
                // Auch die Checkbox wurde zurück gesetzt,
                // wir müssen sie neu setzen:
                document.getElementById('reset-on').checked = true;
              }
            }

                </script>
Öffnendes <script> zwei Mal und nach dem ersten das HTML </div>.
Außerdem sind im HTML noch Strukturfehler: U. a. schließendes </form> fehlt.
Das Javascript besser zusammen am Ende des Body platzieren.
Und ich sehe noch ein unwirksames <select>, das Du wahrscheinlich für die Sprachumschaltung vorgesehen hattest. Ich habe es heraus genommen.
Die type-Attribute der beiden Buttons habe wieder Anhängsel "1" und "2", das sind keine zulässigen Typen.
So funktioniert es dann wieder:
Code: 
<body>
    <label>
        English
        <input type="radio" name="lang-choose" value="EN">
    </label>
    <label>
        Deutsch
        <input type="radio" name="lang-choose" value="DE" checked>
    </label>
    <label>
        Polski
        <input type="radio" name="lang-choose" value="PL">
    </label>
    <form id="itemForm" autocomplete="off">
        <label for="sku">SKU:</label>
        <input type="search" id="sku" name="sku">
        <label for="description">Description:</label>
        <input type="search" id="description" name="description">
        <label for="color">Color:</label>
        <input type="search" id="color" name="color">
        <label for="size">Size:</label>
        <input type="search" id="size" name="size">
        <div class="flex-container">
            <input type="button" id="submit" value="Submit" onclick="submitForm()">
            <input type="button" id="reset" value="Reset" onclick="form.reset()">
        </div>
        Auto Reset
        <div class="onoffswitch">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="reset-on">
            <label class="onoffswitch-label" for="reset-on">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </div>
    </form>
    <br>
    <br>
    <img src=//Logo habe ich für hier entfernt (Datenschutz) </div>
    <br>
    <br>

    <script>
        function submitForm() {
            var form = document.getElementById('itemForm');
            var formData = {
                'sku': form.sku.value,
                'color': form.color.value,
                'size': form.size.value,
                'description': form.description.value
            };
            google.script.run.processForm(formData);
            // Prüfen ob das Formular zurück gesetzt werden soll:
            if (document.getElementById('reset-on').checked) {
                form.reset();
                // Auch die Checkbox wurde zurück gesetzt,
                // wir müssen sie neu setzen:
                document.getElementById('reset-on').checked = true;
            }
        }
    </script>
    <script>
        // Labels fest legen:
        const labels = {
            EN: {
                // Links vom Doppelpunkt: Die ID des Inputs bzw.
                // der Wert des for-Attributs des Labels
                // Rechts vom Doppelpunkt: Die Beschriftung
                description: 'Description',
                color: 'Color',
                size: 'Size',
                reset: 'Reset',//<input type="button"
                submit: 'Submit',//<input type="button"
                details: 'Item Details',
                autoreset: 'Auto Reset'//<input type="button"
            },
            DE: {
                description: 'Beschreibung',
                color: 'Farbe',
                size: 'Größe',
                reset: 'Zurücksetzen ', //<input type="button"
                submit: 'Einreichen',//<input type="button"
                details: 'Item Details',
                autoreset: 'Automatisches Zurücksetzen'//<input type="button"
            },
            PL: {
                description: 'Opis',
                color: 'Kolor',
                size: 'Rozmiar',
                reset: 'automatyczny reset', //<input type="button"
                submit: 'Składać',//<input type="button"
                details: 'Item Details',
                autoreset: 'automatyczny reset',//<input type="button"
            }
        }
        theForm = document.querySelector('#itemForm');
        // Eventlistener für "change" für das window-Objekt registrieren:
        window.addEventListener('change', event => {
            // Hat sich der Zustand einer Checkbox für die
            // Auswahl der Sprache geändert?
            if (event.target.name = 'lang-choose') {
                const
                    // Die Liste der Beschriftungen für die gewählte
                    // Sprache bereit stellen:
                    labelList = labels[event.target.value];
                // Über die Beschriftungen in der Liste:
                for (id in labelList) {
                    // Im Label, das als for-Attribut die aktuelle ID hat
                    // die Beschriftung auf den Wert des Eintrags setzen:
                    const lbl = theForm.querySelector(`label[for="${id}"]`);
                    if (lbl) {
                        lbl.textContent = labelList[id];
                    } else {
                        // Es gibt kein Label mit for-Attribut für diese ID,
                        // prüfen ob es einen Button mit der ID gibt:
                        const btn = theForm.querySelector(`input[id="${id}"]`);
                        if (btn) {
                            // Es handelt sich um einen Button,
                            // value-Attribut auf den Wert des Eintrags setzen:
                            btn.value = labelList[id];
                        }
                    }
                }
            }
        });
    </script>
</body>

</html>
Den Checkbutton für das Autoreset habe ich erst Mal nicht berücksichtigt. Wir werden dafür ein Label brauchen. Poste dafür bitte auch das CSS.
 
Rolf B schrieb:
Copy+Paste, ohne zu verstehen, was man kopiert, ist ein Patentrezept, um zu scheitern.
Zum Vergrößern anklicken....
Wie man eindeutig erkennt an:
Sempervivum schrieb:
Öffnendes <script> zwei Mal und nach dem ersten das HTML </div>.
Außerdem sind im HTML noch Strukturfehler: U. a. schließendes </form> fehlt.
Das Javascript besser zusammen am Ende des Body platzieren.
Und ich sehe noch ein unwirksames <select>, das Du wahrscheinlich für die Sprachumschaltung vorgesehen hattest. Ich habe es heraus genommen.
Die type-Attribute der beiden Buttons habe wieder Anhängsel "1" und "2", das sind keine zulässigen Typen.
Zum Vergrößern anklicken....
Aber es gibt ja Leute, die immer und immer wieder fertige Lösungen liefern, ich verstehe es nicht. :frown:
 
Werbung:
Sempervivum schrieb:
Guten Morgen,
leider hast Du einen Fehler immer noch drin, hier:
Code: 
        </div>
<script>
 
            }
  </div>
          <script>
            function submitForm() {
              var form = document.getElementById('itemForm');
              var formData = {
                'sku': form.sku.value,
                'color': form.color.value,
                'size': form.size.value,
                'description': form.description.value
              };
              google.script.run.processForm(formData);
              // Prüfen ob das Formular zurück gesetzt werden soll:
              if (document.getElementById('reset-on').checked) {
                form.reset();
                // Auch die Checkbox wurde zurück gesetzt,
                // wir müssen sie neu setzen:
                document.getElementById('reset-on').checked = true;
              }
            }

                </script>
Öffnendes <script> zwei Mal und nach dem ersten das HTML </div>.
Außerdem sind im HTML noch Strukturfehler: U. a. schließendes </form> fehlt.
Das Javascript besser zusammen am Ende des Body platzieren.
Und ich sehe noch ein unwirksames <select>, das Du wahrscheinlich für die Sprachumschaltung vorgesehen hattest. Ich habe es heraus genommen.
Die type-Attribute der beiden Buttons habe wieder Anhängsel "1" und "2", das sind keine zulässigen Typen.
So funktioniert es dann wieder:
Code: 
<body>
    <label>
        English
        <input type="radio" name="lang-choose" value="EN">
    </label>
    <label>
        Deutsch
        <input type="radio" name="lang-choose" value="DE" checked>
    </label>
    <label>
        Polski
        <input type="radio" name="lang-choose" value="PL">
    </label>
    <form id="itemForm" autocomplete="off">
        <label for="sku">SKU:</label>
        <input type="search" id="sku" name="sku">
        <label for="description">Description:</label>
        <input type="search" id="description" name="description">
        <label for="color">Color:</label>
        <input type="search" id="color" name="color">
        <label for="size">Size:</label>
        <input type="search" id="size" name="size">
        <div class="flex-container">
            <input type="button" id="submit" value="Submit" onclick="submitForm()">
            <input type="button" id="reset" value="Reset" onclick="form.reset()">
        </div>
        Auto Reset
        <div class="onoffswitch">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="reset-on">
            <label class="onoffswitch-label" for="reset-on">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </div>
    </form>
    <br>
    <br>
    <img src=//Logo habe ich für hier entfernt (Datenschutz) </div>
    <br>
    <br>

    <script>
        function submitForm() {
            var form = document.getElementById('itemForm');
            var formData = {
                'sku': form.sku.value,
                'color': form.color.value,
                'size': form.size.value,
                'description': form.description.value
            };
            google.script.run.processForm(formData);
            // Prüfen ob das Formular zurück gesetzt werden soll:
            if (document.getElementById('reset-on').checked) {
                form.reset();
                // Auch die Checkbox wurde zurück gesetzt,
                // wir müssen sie neu setzen:
                document.getElementById('reset-on').checked = true;
            }
        }
    </script>
    <script>
        // Labels fest legen:
        const labels = {
            EN: {
                // Links vom Doppelpunkt: Die ID des Inputs bzw.
                // der Wert des for-Attributs des Labels
                // Rechts vom Doppelpunkt: Die Beschriftung
                description: 'Description',
                color: 'Color',
                size: 'Size',
                reset: 'Reset',//<input type="button"
                submit: 'Submit',//<input type="button"
                details: 'Item Details',
                autoreset: 'Auto Reset'//<input type="button"
            },
            DE: {
                description: 'Beschreibung',
                color: 'Farbe',
                size: 'Größe',
                reset: 'Zurücksetzen ', //<input type="button"
                submit: 'Einreichen',//<input type="button"
                details: 'Item Details',
                autoreset: 'Automatisches Zurücksetzen'//<input type="button"
            },
            PL: {
                description: 'Opis',
                color: 'Kolor',
                size: 'Rozmiar',
                reset: 'automatyczny reset', //<input type="button"
                submit: 'Składać',//<input type="button"
                details: 'Item Details',
                autoreset: 'automatyczny reset',//<input type="button"
            }
        }
        theForm = document.querySelector('#itemForm');
        // Eventlistener für "change" für das window-Objekt registrieren:
        window.addEventListener('change', event => {
            // Hat sich der Zustand einer Checkbox für die
            // Auswahl der Sprache geändert?
            if (event.target.name = 'lang-choose') {
                const
                    // Die Liste der Beschriftungen für die gewählte
                    // Sprache bereit stellen:
                    labelList = labels[event.target.value];
                // Über die Beschriftungen in der Liste:
                for (id in labelList) {
                    // Im Label, das als for-Attribut die aktuelle ID hat
                    // die Beschriftung auf den Wert des Eintrags setzen:
                    const lbl = theForm.querySelector(`label[for="${id}"]`);
                    if (lbl) {
                        lbl.textContent = labelList[id];
                    } else {
                        // Es gibt kein Label mit for-Attribut für diese ID,
                        // prüfen ob es einen Button mit der ID gibt:
                        const btn = theForm.querySelector(`input[id="${id}"]`);
                        if (btn) {
                            // Es handelt sich um einen Button,
                            // value-Attribut auf den Wert des Eintrags setzen:
                            btn.value = labelList[id];
                        }
                    }
                }
            }
        });
    </script>
</body>

</html>
Den Checkbutton für das Autoreset habe ich erst Mal nicht berücksichtigt. Wir werden dafür ein Label brauchen. Poste dafür bitte auch das CSS.
Zum Vergrößern anklicken....
Die Anhängsel an den Button habe ich für die Button Themen das bei mir weiter oben platziert ist
 
Ich nehme an, Du hast die Anhängsel für das CSS gebraucht? Das ist kein Problem, wenn Du die Buttons individuell ansprechen willst, kannst Du die ID nehmen:
Code: 
#submit {
    /* Dein CSS für den Submit-Button */
}
 
Werbung:
Danke danke danke !!!!:wink: Alles funktioniert wie es soll (nur der grafische Teil ist zerschossen, beidem ich viel Mühe hatte)und sie haben mein Dropdown-Menü für die Sprachauswahl herausgeschmissen:confused:
 
Zuletzt bearbeitet:
sie haben mein Dropdown-Menü für die Sprachauswahl herausgeschmissen:confused:
Zum Vergrößern anklicken....
Das tut mir Leid, ich dachte, weil es keine Funktion hat, nehme ich es heraus. Ich habe jedenfalls im Javascript nichts gefunden, was sich auf dieses Dropdown-Menü bzw. Select bezieht.

nur der grafische Teil ist zerschossen, beidem ich viel Mühe hatte
Zum Vergrößern anklicken....
Auch das ist bedauerlich. Ich kann es mir nur so erklären, dass durch die Änderungen, als ich die Strukturfehler im HTML korrigiert habe, das CSS nicht passt. Damit Du nicht von vorn anfangen musst, poste auch das aktuelle CSS. Sind sicher nur Kleinigkeiten.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben