Suche Möglichkeit acht Wörter in drei Sprachen zu übersetzen
- Ersteller kaysiebke
- Erstellt am
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 dessenonsubmit="submitForm(event)"auf dem form-Element. Der Reset-Button braucht keinonclick, wenn ertype="reset"hat und im Form sitzt - In der submitForm-Funktion das event entgegennehmen (also
function submitForm(event)und dannevent.preventDefault()aufrufen, damit der Browser das Form nicht selbst abschickt
- Submit- und Reset-Button ins Form hinein, als
- 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.
Bis auf den Homepage-Baukästen volle Zustimmung.
Sempervivum
Senior HTML'ler
Guten Abend @kaysiebke
Bist Du inzwischen bei der Lösung des Problems weiter gekommen?
Bist Du inzwischen bei der Lösung des Problems weiter gekommen?
Zuletzt bearbeitet:
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
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.
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
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
Sempervivum
Senior HTML'ler
@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:
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.
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>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.
Einer liefert immer.
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!
Sempervivum
Senior HTML'ler
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>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 ?
Sempervivum
Senior HTML'ler
Nein, ich habe den Code aus #30 getestet und er funktioniert. Du musst nur darauf achten, dass die Buttons auch die richtigen IDs haben:
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.
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>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:
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:
Sempervivum
Senior HTML'ler
Guten Morgen,
leider hast Du einen Fehler immer noch drin, hier:
Öffnendes
Außerdem sind im HTML noch Strukturfehler: U. a. schließendes
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:
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.
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><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>Wie man eindeutig erkennt an:
Aber es gibt ja Leute, die immer und immer wieder fertige Lösungen liefern, ich verstehe es nicht.
Die Anhängsel an den Button habe ich für die Button Themen das bei mir weiter oben platziert ist
Bz.hatte ich sie anfangs wegen der Flex box
Sempervivum
Senior HTML'ler
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 */
}
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 herausgeschmissenSempervivum
Senior HTML'ler
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.sie haben mein Dropdown-Menü für die Sprachauswahl herausgeschmissen
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.
