JavaScript - Eingabe-Ausgabe

[XentriX5526]

Guten Morgen…

...folgendes Problem:

es gibt 3 Elemente

• Eingabefeld <input typ="input">

• Button <input type="button">

• Ausgabefeld <output typ="output">

Im Eingabefeld möchte ich gerne eine 14stlg. alpha-nummerische Nummer eingeben können

(Bsp.: 491C00A7535597)

mit klick auf den Button soll mir im Ausgabefeld nur bestimmte stellen der alpha-nummerischen Nummer in eigens definierter Reihenfolge angezeigt werden.

in dem Fall:

1- 6.Stelle der Nr

2- 13.Stelle der Nr

3- 10. Stelle der Nr

4- 14. Stelle der Nr

5- 11. Stelle der Nr

Lösung zum Bsp.: 09375

Fragen:

-Kann man so etwas in Javascript umsetzen?

-Kann man es ohne einen Button (z.B. mit <input type"input"> + [ENTER]) im Ausgabefeld anzeigen lassen?

Grüße

[Auge]

Hallo

es gibt 3 Elemente

• Eingabefeld <input typ="input">

• Button <input type="button">

• Ausgabefeld <output typ="output">

Im Eingabefeld möchte ich gerne eine 14stlg. alpha-nummerische Nummer eingeben können

(Bsp.: 491C00A7535597)

mit klick auf den Button soll mir im Ausgabefeld nur bestimmte stellen der alpha-nummerischen Nummer in eigens definierter Reihenfolge angezeigt werden.

in dem Fall:

1- 6.Stelle der Nr
2- 13.Stelle der Nr
3- 10. Stelle der Nr
4- 14. Stelle der Nr
5- 11. Stelle der Nr

Lösung zum Bsp.: 09375

Fragen:

-Kann man so etwas in Javascript umsetzen?

Ja. Du hast den alphanumerischen String und kannst dessen zeichen durchzählen, extrahieren und eine Ausgabe erstellen.

-Kann man es ohne einen Button (z.B. mit <input type"input"> + [ENTER]) im Ausgabefeld anzeigen lassen?

Ja. Du erzeugst zwei Eventhandler, für den Button click und für das Absenden (das mit Enter ausgelöst würde) submit und rufst bei beiden Events die gleiche Funktion auf, die den Code zur Stringverarbeitung enthält.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Ja. Du erzeugst zwei Eventhandler, für den Button click und für das Absenden (das mit Enter ausgelöst würde) submit

Wozu das denn?

LLAP 🖖

[Gunnar Bittersmann]

@@XentriX5526

1- 6.Stelle der Nr

2- 13.Stelle der Nr

3- 10. Stelle der Nr

4- 14. Stelle der Nr

5- 11. Stelle der Nr

Lösung zum Bsp.: 09375

Fragen:

-Kann man so etwas in Javascript umsetzen?

Ja, klar. Entweder wendest du einen regulären Ausdruck .....(.)...(.)(.).(.)(.) an, wobei ein . für ein Zeichen steht und diejenigen, die du ausgeben willt, in Klammern stehen. Ausgabe in der Reihenfolge des Vorkommens: $1$4$2$5$3.

Oder du verwendest die Stringfunktion substr().

-Kann man es ohne einen Button (z.B. mit <input type"input"> + [ENTER]) im Ausgabefeld anzeigen lassen?

Formulare werden auch mit [Enter] abgeschickt. Pack die Elemente in ein form-Element. Die Bearbeitung der Eingabe/Ausgabe erfolgt nicht auf click-Event des Buttons, sondern auf submit-Event des Formulars.

(Der Button muss dazu ein Submit-Button sein, also nicht type="button".)

Das Standard-Absenden des Formulars unterdrückst du mit Event.preventDefault().

LLAP 🖖

[Marvin]

super... danke für die antworten!

Würdet ihr mir bei der erarbeitung des codes helfen?

PS: Helfen=Ich schreibe hier einen code so gut wie ich es mit meinen kenntnissen hinbekmme und ihr helft mir Fehler abzustellen… Ich bin kein schmarotzer der einen fertigen code erbittet.

😉

[Gunnar Bittersmann]

@@Marvin

Würdet ihr mir bei der erarbeitung des codes helfen?

Ja, klar. Wenn du konkrete Fragen hast, immer her damit.

LLAP 🖖

[pl]

Ja, klar. Entweder wendest du einen regulären Ausdruck .....(.)...(.)(.).(.)(.) an, wobei ein . für ein Zeichen steht

Das Problem in JS ist, dass der Punkt eben nicht auf jedes beliebige Zeichen matcht.

[dedlfix]

Tach!

Ja, klar. Entweder wendest du einen regulären Ausdruck .....(.)...(.)(.).(.)(.) an, wobei ein . für ein Zeichen steht

Das Problem in JS ist, dass der Punkt eben nicht auf jedes beliebige Zeichen matcht.

Ja, Newlines sind ausgeklammert. Aber die kommen in einer einzeiligen Eingabe nicht vor. Oder welche Zeichen meinst du?

dedlfix.

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Oder du verwendest die Stringfunktion substr().

Statt String.substr(position, 1) tut’s natürlich auch String.charAt(position).

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Die Bearbeitung der Eingabe/Ausgabe erfolgt nicht auf click-Event des Buttons, sondern auf submit-Event des Formulars.

Hm, das click-Event des Submit-Buttons feuert auch, wenn das Formular per [Enter] abgeschickt wird‽

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Hm, das click-Event des Submit-Buttons feuert auch, wenn das Formular per [Enter] abgeschickt wird‽

Ja, darüber habe ich mich auch schon gewundert, es aber nicht weiter untersucht. Offenbar wird ein Click simuliert.

Bis demnächst
Matthias

[dedlfix]

Tach!

• Eingabefeld <input typ="input">

type="text" wolltest du an dieser Stelle wohl nehmen.

dedlfix.

[XentriX5526]

jaaa.... peinlich

<script language="javascript">
<!--//
function gener(form) {
	var str = sernr;
	var res = str.substr(5, 1);
	var res = str.substr(12, 1);
	var res = str.substr(9, 1);
	var res = str.substr(13, 1);
	var res = str.substr(10, 1);
	document.getElementByName("code1").innerHTML = res;
}
//-->
</script>

<form>
	<input type="text" name="sernr" size="14">
	<input type="submit" onClick="gener(this.form)" value="Umwandeln">
	<output type="output" name="code1">
</form>

soweit bin ich jetzt.... klappt aber nicht :(

[XentriX5526]

str.charAt(0) ... gefällt mir besser...

<script language="javascript">
<!--//
function gener(form) {
	var str = sernr;
	var str.charAt(5);
	var str.charAt(12);
	var str.charAt(9);
	var str.charAt(13);
	var str.charAt(10);
	document.getElementByName("code1").innerHTML = res;
}
//-->
</script>

<form>
	<input type="text" name="sernr" size="14">
	<input type="submit" onClick="gener(this.form)" value="Umwandeln">
	<output type="output" name="code1">
</form>

[dedlfix]

Tach!

soweit bin ich jetzt.... klappt aber nicht :(

Was klappt nicht? Was tust du, was soll werden, was passiert stattdessen? Diese drei Fragen solltest du dir jeweils aus der Sicht des Anwenders und aus der Sicht des Entwicklers stellen.

Für letztere haben die Browser Entwicklerwerkzeuge an Bord. Nutze sie (meist mit F12 zu erreichen). Besonders die Console ist die erste Anlaufstelle, da dort die Fehlermeldungen erscheinen.

Der nächste Punkt sind Kontrollausgaben zum Nachvollziehen des Programmablaufs. Oder du verwendest den Debugger. Das ist ein mächtiges Tool, erfordert aber etwas Einarbeitung.

dedlfix.

[XentriX5526]

• die gewünschte Ausgabe funktioniert nicht.

• klick auf "Umwandeln"

• Console gibt wieder:

Uncaught SyntaxError: Unexpected token .

var sernr.charAt(5);

[dedlfix]

Tach!

Uncaught SyntaxError: Unexpected token .

var sernr.charAt(5);

Ja, das ist ja auch kein syntaktisch sinnvoller Ausdruck. "Definiere eine Variable, hier hast du einen Ausdruck zum Berechnen des Inhalts." Wo ist der Name der Variablen, die angelegt werden soll? Und das Gleichheitszeichen das danach folgend vorgeschrieben ist?

dedlfix.

[Gunnar Bittersmann]

@@XentriX5526

<script language="javascript">
<!--//

language="javascript" ist ebenso unsinnig wie die Auskommentierung mit <!--// und //-->. Weg damit!

function gener(form) {
	var str = sernr;

Das wird so nichts. Den Wert des Eingabefeldes bekommst du über dessen value-Eigenschaft.

LLAP 🖖

[XentriX5526]

<script>
function gener(form) {
	var sernr = document.getElementById("sernr")**.value;**
	var sernr.charAt(5);	/*6. Zeichen*/
	var sernr.charAt(12);	/*13. Zeichen*/
	var sernr.charAt(9);	/*10. Zeichen*/
	var sernr.charAt(13);	/*14. Zeichen*/
	var sernr.charAt(10);	/*11. Zeichen*/
	document.getElementById("code1").innerHTML = res;
}
</script>

<form>
	<input type="text" id="sernr" **value="sernr"** size="14">
	<output type="output" id="code1">
</form>

[Gunnar Bittersmann]

@@XentriX5526

	var sernr.charAt(5);	/*6. Zeichen*/
	var sernr.charAt(12);	/*13. Zeichen*/
	var sernr.charAt(9);	/*10. Zeichen*/
	var sernr.charAt(13);	/*14. Zeichen*/
	var sernr.charAt(10);	/*11. Zeichen*/

Hier solltest du auch mit Fehlermeldungen überhäuft werden.

BTW, die fünf Kommentare sind wohl überflüssig; der Methodenname charAt() ist selbstsprechend.

Wenn, dann ein Kommentar à la // Zählung beginnt bei 0.

LLAP 🖖

[dedlfix]

Tach!

	var sernr.charAt(5);	/*6. Zeichen*/
	var sernr.charAt(12);	/*13. Zeichen*/
	var sernr.charAt(9);	/*10. Zeichen*/
	var sernr.charAt(13);	/*14. Zeichen*/
	var sernr.charAt(10);	/*11. Zeichen*/

Hier solltest du auch mit Fehlermeldungen überhäuft werden.

Nacheinander vielleicht, wenn man jeden Fehler einzeln beseitigt. Ansonsten bricht die Verarbeitung ja nach dem ersten Syntaxfehler ab.

dedlfix.

[Tabellenkalk]

Hallo,

Nacheinander vielleicht, wenn man jeden Fehler einzeln beseitigt.

Kalks Rule of debuggin, § 7
Nach dem drittenmal darf man gleichartige Fehler gemeinsam beseitigen!

Gruß
Kalk

[Auge]

Hallo

<script language="javascript">

Lasse „ language="javascript"“ weg.

<!--//

Lasse diesen unnützen Kommentar weg.

	var str = sernr;

Was ist, bzw. woher kommt die Variable sernr? Wenn du das Eingabefeld mit dem Namen haben willst, musst du es schon identifizieren. Du kannst zwar über die Eingabefelder gehen, auch nur über die vom Typ „text“, da es sich hier um ein bestimmtes Feld geht, ist die identifizioerung über eine ID besser geeignet.

<input type="text" name="sernr" id="sernr" size="14">

	var str = document.getElementById("sernr").value;

	var res = str.substr(5, 1);
	var res = str.substr(12, 1);
	var res = str.substr(9, 1);
	var res = str.substr(13, 1);
	var res = str.substr(10, 1);

Du überschreibst in jeder Zeile den in der Vorzeile ermittelten Wert. Du willst die Werte aber an die vorher ermittelten Werte anhängen. Das geht z.B. mit einer Verkettung (Concatenation).

	var res = str.substr(5, 1);
	var res = str + str.substr(12, 1);
	var res = str + str.substr(9, 1);
	// u.s.w. u.s.f.

Ob du nachher lieber charAt statt substr einsetzen willst, wie du es in einem weiteren Posting gezeigt hast, bleibt dir überlassen. Es sieht zumindest treffender und weniger umständlich aus. Das Prinzip bleibt das Gleiche. Ich habe einfach den hier vorhandenen Code benutzt.

Tschö, Auge

[Marvin]

Jetzt blitzt mal kurz etwas auf... die Ausgabe ist aber so schnell weg dass ich sie nicht sehen kann…

<script>
function gener(form) {
	var str = document.getElementById("sernr").value;
	var res = str.charAt(5);			//6. Zeichen
	var res = str + str.charAt(12);		//13. Zeichen
	var res = str + str.charAt(9);		//10. Zeichen
	var res = str + str.charAt(13);		//14. Zeichen
	var res = str + str.charAt(10);		//11. Zeichen
	document.getElementById("code1").innerHTML = res;
}
</script>

<form>
	<input type="text" name="sernr" id="sernr" size="14">
	<input type="submit" onClick="gener(this.form)" value="Umwandeln">
	<output type="output" id="code1">
</form>

Console: -keine Einträge−

[Auge]

Hallo

Jetzt blitzt mal kurz etwas auf... die Ausgabe ist aber so schnell weg dass ich sie nicht sehen kann…

Ok. Ist das aufblitzende Etwas wenigstens länger als ein Zeichen?

<form>
	<input type="text" name="sernr" id="sernr" size="14">
	<input type="submit" onClick="gener(this.form)" value="Umwandeln">
	<output type="output" id="code1">
</form>

Output soll Inhalt haben (dein String), bedarf also eines Endtags. Das Attribut type mit dem Wert „output“ ist hier Blödsinn.

	<output id="code1"></output>

Da wir keine HTML-Struktur in das output einfügen wollen, ist die Beschränkung auf textContent statt innerHTML sinnvoll. Die letzte Zeile deiner Funktion gener sollte also folgendermaßen aussehen.

	document.getElementById("code1").textContent = res;

Der Name der Funktion sollte im Übrigen „sprechender“ sein, damit du auch in einem halben Jahr noch auf Anhieb siehst, was die Funktion tun soll.

Tschö, Auge

[TS]

Hello,

	var res = str.substr(5, 1);
	var res = str.substr(12, 1);
	var res = str.substr(9, 1);
	var res = str.substr(13, 1);
	var res = str.substr(10, 1);

Du überschreibst in jeder Zeile den in der Vorzeile ermittelten Wert. Du willst die Werte aber an die vorher ermittelten Werte anhängen. Das geht z.B. mit einer Verkettung (Concatenation).

	var res = str.substr(5, 1);
	var res = str + str.substr(12, 1);
	var res = str + str.substr(9, 1);
	// u.s.w. u.s.f.

Hä? ;-)

Nicht besser so?

	var res = str.substr(5, 1);
	res = res + str.substr(12, 1);
	res = res + str.substr(9, 1);
	// u.s.w. u.s.f.

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Hä? ;-)

Nicht besser so?

	var res = str.substr(5, 1);
	res = res + str.substr(12, 1);
	res = res + str.substr(9, 1);
	// u.s.w. u.s.f.

Hä? ;-)

Nicht besser so?

	var res = str.substr(5, 1)
	        + str.substr(12, 1)
	        + str.substr(9, 1)
	        + str.substr(13, 1)
	        + str.substr(10, 1);

LLAP 🖖

[TS]

Hello lieber Gunnar,

Hä? ;-)

Nicht besser so?

	var res = str.substr(5, 1);
	res = res + str.substr(12, 1);
	res = res + str.substr(9, 1);
	// u.s.w. u.s.f.

Hä? ;-)

Nicht besser so?

	var res = str.substr(5, 1)
	        + str.substr(12, 1)
	        + str.substr(9, 1)
	        + str.substr(13, 1)
	        + str.substr(10, 1);

Ich habe das absichtlich ausführlich geschrieben.
Es kommen vermutlich noch weitere Abfragen hinzu, damit man bei str z. B. nicht ins Leere greift.

Grundsätzlich hast Du natürlich fast Recht. Aber wenn man es auf die Spitze treibt, kann man auch var res noch einsparen ...

Liebe Grüße
Tom S.

[Auge]

Hallo

	var res = str.substr(5, 1);
	var res = str + str.substr(12, 1);
	var res = str + str.substr(9, 1);
	// u.s.w. u.s.f.

Hä? ;-)

Abgesehen von den im weiteren Verlauf beschriebenen Optimierungsmöglichkeiten bitte hier entlang. Du bist nicht der Erste, dem das aufgefallen ist. :-)

Tschö, Auge

[Gunnar Bittersmann]

@@XentriX5526

...folgendes Problem:

es gibt 3 Elemente

• Eingabefeld <input typ="input">

• Button <input type="button">

• Ausgabefeld <output typ="output">

Problem: Jedes Eingabefeld sollte eine Beschriftung (label-Element) haben. Woher soll ein Nuzter sonst wissen, was dort einzugeben ist?

LLAP 🖖

[Marvin]

Nach langem probieren konnte ich den "aufblitzenden" Text in einem Screenshot festhalten… Bei eingabe von Serialnummer "12345678901234" kommt im Output "123456789012341"

<script>
function convert(form) {
	var str = document.getElementById("serial").value;
	var res = str.charAt(5);			//6. Zeichen
	var res = str + str.charAt(12);		//13. Zeichen
	var res = str + str.charAt(9);		//10. Zeichen
	var res = str + str.charAt(13);		//14. Zeichen
	var res = str + str.charAt(10);		//11. Zeichen
	document.getElementById("code1").textContent = res;
}
</script>

<form>
	<input type="text" name="serial" id="serial" size="14" maxlength="14" placeholder="491C00A7535597"><br>
	<output id="code1"></output>
</form>

Es funktioniert also leider immer noch nicht.

[Auge]

Hallo

Nach langem probieren konnte ich den "aufblitzenden" Text in einem Screenshot festhalten… Bei eingabe von Serialnummer "12345678901234" kommt im Output "123456789012341"

Ah ja, du hängst das erste Zeichen von str an str an. Das war mein Fehler. Die einzelnen Zeichen müssen natürlich an deine neue Variable angehängt werden.

function convert(form) {
	var str = document.getElementById("serial").value;
	var res = str.charAt(5);			//6. Zeichen
	var res = res + str.charAt(12);		//13. Zeichen
	// u.s.w. u.s.f.
	document.getElementById("code1").textContent = res;
}

Eine Antwort auf die Frage, warum das Ergebnis „nur aufblitzt“, habe ich allerdings auch nicht.

Tschö, Auge

[Matthias Apsel]

Hallo Auge,

Eine Antwort auf die Frage, warum das Ergebnis „nur aufblitzt“, habe ich allerdings auch nicht.

Weil das von Gunnar vorgeschlagene Formular abgesendet und somit die Seite neu geladen wird?

preventDefault() sollte helfen.

Bis demnächst
Matthias

[ThomasM]

Hallo XentriX5526,

zum schon Gesagten ein Ansatz mit dem guten alten arguments-Objekt und dem Hintergrund, dass sich Zeichenketten auch direkt über einen Laufindex ab 0 abfragen lassen:

function str_generate()
{
  var args = arguments.length;
  var rets = "";
  for(var i = 1; i < args; i++)
  {
    rets += arguments[0][arguments[i] - 1];
    // oder:
    // rets += arguments[0].charAt([arguments[i] - 1]);       
  }
  return rets;
}
      
var inp_str = "491C00A7535597";
var out_str = str_generate(inp_str, 6, 13, 10, 14, 11);
alert(out_str); // 09375

Grüße,
Thomas