JavaScript Ergebnis in INPUT Feld + Zahl mittels CSS formatieren

[Franz]

Hallo, ich habe hier im Archiv folgenden Code gefunden,

 function calculate() {
 	input1 = parseFloat( document.formular.input1.value.replace(/,/ , ".") );
 	input2 = parseFloat( document.formular.input2.value.replace(/,/ , ".") );
	input3 = parseFloat( document.formular.input3.value.replace(/,/ , ".") );

	if (typeof(input1)=="number" && input1+""=="NaN") { var input1 =0; }	
	if (typeof(input2)=="number" && input2+""=="NaN") { var input2 =0; }
	if (typeof(input3)=="number" && input3+""=="NaN") { var input3 =0; }
	
	document.getElementById("output").innerHTML= (input1 + input2 + input3).toString().replace(/\./ , ",");	
 }
 

<form name="formular" action="">
<input type="text" name="input1" class="form-control" placeholder="0" onkeyup="calculate()"/>
<input type="text" name="input2" class="form-control" placeholder="0" onkeyup="calculate()"/>
<input type="text" name="input3" class="form-control" placeholder="0" onkeyup="calculate()"/>
<span  class="form-control" id="output">000</span> 
</form>	

Doch ich habe zwei Probleme damit. Ersten möchte ich das Ergebnis in einem INPUT Feld ausgeben lassen.

<span class="form-control" id="output">000</span>

Wenn ich den Code aber ienfach in ein INPUT Feld gebe, bleibt das Feld leer, obwohl ich im Script nichts finde

<input id="output" readonly >

Und weiter möchte ich die Ausgabe Zahlen mittels CSS formatieren, so das aus 1000 1.000€ wird.

Ich hoffe mal das ist kein Hexenwerk

Franz

[JürgenB]

Hallo,

Doch ich habe zwei Probleme damit. Ersten möchte ich das Ergebnis in einem INPUT Feld ausgeben lassen.

warum nicht im dafür gemachten output-Element?

<span class="form-control" id="output">000</span>

Wenn ich den Code aber ienfach in ein INPUT Feld gebe, bleibt das Feld leer, obwohl ich im Script nichts finde

<input id="output" readonly >

ich vermute, du hast es mit innerHTML versucht. input kennt das nicht, versuch es mal mit value.

Und weiter möchte ich die Ausgabe Zahlen mittels CSS formatieren, so das aus 1000 1.000€ wird.

versuch mal https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Number/toLocaleString

Gruß
Jürgen

[Franz]

Meinst du so etwa?

document.getElementById("output").value= (input1 + input2 + input3).toString().replace(/\./ , ",");	

oder im HTML das value?

[JürgenB]

Hallo

Meinst du so etwa?

ja und nein.

document.getElementById("output").value= (input1 + input2 + input3).toString().replace(/./ , ",");

document.getElementById("output").value = ... ist ok, wenn denn output ein input ist, aber der Rest nicht. Dafür gibt es toLocaleString

oder im HTML das value?

nein.

Gruß
Jürgen

[Franz]

Da war ich zu schnell mit dem Absende Button.

Ich habs kapiert mit dem value (glaube ich jedenfalls).

Nur dem dem Format nichts so ganz, da ich mit den eigebenen Werten weiter rechnen möchte und javascript ja aus einem 2.000 eien 2 macht.

aktiviere ich

Number.toLocaleString([locales [, options]])

auch über Javascript?

Franz

[JürgenB]

Hallo Franz,

wenn du Zahlen per Tastatureingabe verarbeiten möchtest, benötigst du ein

<input type="number" …>

per javascript kannst du die Eingabe dann mit

let inputelement = document.querySelector("…");
let inputnumber = inputelement.valueAsNumber;

So erhältst du eine Zahl, mit der du rechnen kannst, und keinen String aus Ziffern. Ich prüfe dann noch mit isNaN ob eine Zahl eingegeben wurde.

Erst bei der Ausgabe kommt dann toLocaleString zum Einsatz.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

ich vermute, du hast es mit innerHTML versucht. input kennt das nicht

Das kann man so nicht sagen. HTMLInputElement erbt von Element die Eigenschaft innerHTML.

Man kann sie auch setzen:

const inputElement = document.querySelector('input');
inputElement.innerHTML = "foo";
console.log(inputElement.innerHTML); //foo 

Es wirkt nur nicht wie gedacht. input ist ein leeres HTML-Element, hat also keinen Inhalt. Was immer man da in innerHTML reinschreibt, es kommt im UI nicht an.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Franz]

Das mit dem VALUE funktioniert. Danke!

Doch ich habe immer noch das FORMAT Problem.

Ich habe ja mehrere INPUT Felder die ich eingeben kann und mittels JAVASCRIPT ausgelesen werden und SOFORT in einem anderen INPUT Feld ausgegeben werden.

Nun möchte ich alle Felder die EINGABE und AUSGABE INPUT Felder sofort bei der EINGABE, bzw. bei der Ausgabe formatieren.

So das überall aus 1000 dann 1.000 € wird.

[Rolf B]

Hallo Franz,

es gibt in HTML keinen Input-Typ "currency", und damit bist Du eigentlich - gerade bei der Eingabe - schon ausgezählt. Du kannst etwas tricksen, indem Du dem input den Rand klaust und den Rand mit einem span drumherum wieder hinzufügst. Dann kannst Du das € Zeichen per HTML hinter die Eingabe kleben.

span.input-currency {
  border: 1px solid black;;
  display:inline-block;
}
span.input-currency input {
  border: none;
}

<span class="input-currency"><input type="number"> €</span>

Ein Tausenderseparator während der Eingabe würde bedeuten, dass Du nach jedem change des Input-Elements den Inhalt ausliest, alles außer Ziffern entfernst und dann Tausenderpunkte einsetzt. Keine Ahnung, welche Anwendererfahrung das bedeutet. Copy im Input-Feld und Paste anderswo würde den Tausenderpunkt mitnehmen. Allerdings artet das in ein wüstes Gefummel mit der Cursorposition aus, das ist mir jetzt in 10 Minuten Basteln nicht gelungen. Da muss man den Wert vor der Eingabe haben, muss gucken, wieviele Punkte im alten Feldinhalt links vom Cursor waren, sehr umständlich. Wenn Du keine Berührungsängste zu jQuery hast, da gibt's ein passendes Plugin. Aber mutmaßlich gibt's sowas auch stand-alone.

Rolf

[Franz]

Wenn ich die Ausgabe formatiere, mittels php bzw. Javascript und bei der Eingabe alle Buchstaben etc. löschen könnte es doch funktionieren?

getInputAsFloat(document.formular.Input3).replace(/[^0-9 ]/g, "")

Aber ich glaube ich habe das replace nicht korrekt verwendet

[Franz]

Jetzt habe ich vor lauter schnell schnell die function vergessen zu posten

Also erst auslesen und alle Zeichen ausser Zaheln löschen

getInputAsFloat(document.formular.Input3);

function getInputAsFloat(element) {
  let input = parseFloat(element.value.replace(/[^a-zA-Z0-9 ]/g, "") );
  return (isNaN(input)) ? 0 : input; 
}

dann irgendwie wieder formatiert ausgeben

[Rolf B]

Hallo Franz,

einatmen. Ausatmen. Ruhe. Ok?

Den Replace brauchst Du nur einmal. In der Function. Vor dem parseFloat. Aber wenn Du a-zA-Z in den replace mit hinein nimmst, dann bleiben auch die ASCII Buchstaben stehen. Der Replace, den du außerhalb der Funktion aufrufst, wäre richtig. Nur geht der schief, weil die Funktion keinen String, sondern eine Zahl liefert. Also: Replace außerhalb der Funktion weg, und beim Replace innerhalb der Funktion die Regex fixen.

Das ist aber nur das Lesen des Wertes als Zahl, und damit nur die halbe Miete. Wenn Du die Tausendertrenner und das Eurozeichen im Input sichtbar haben willst, dann müsstest Du während der Benutzereingabe ständig nachkorrigieren. Und das verhagelt dem Anwender die Freude an der Eingabe, weil das Überschreiben des Wertes den Cursor ans Feldende stellt. Und den korrekt nachzuführen, macht die von mir erwähnte Mühe. Du kannst input-Inhalte nach Verlassen des Feldes natürlich per Script formatieren.

Noch ein Tipp: Der parseFloat sollte dann eigentlich immer gelingen, außer wenn keine einzige Ziffer im Feld stand. Dann gibt's NaN. An der Stelle kannst Du Dir zu Nutze machen, dass NaN ein falsy value ist, d.h. bei booleschen Vergleichen wie FALSE behandelt wird. Du kannst Dir weiterhin zu Nutze machen, dass die booleschen Operatoren && und || nicht true und false zurückgeben, sondern einen ihrer Operanden.

a && b ergibt a wenn a falsy ist und b, wenn a truthy ist.
a || b ergibt a, wenn a truthy ist und b, wenn a falsy ist.

Demnach ist parseFloat(xyz) || 0 ein einfaches Mittel, um ein NaN Ergebnis auf 0 umzusetzen.

Also (mit Trennung von Lesen und Konvertieren):

function getInputAsFloat(element) {
  let inhalt = element.value.replace(/[^0-9 ]/g, "");
  let value = parseFloat(inhalt);
  return value || 0;
}

oder als Einzeiler

function getInputAsFloat(element) {
  return parseFloat(element.value.replace(/[^0-9 ]/g, "")) || 0;
}

Rolf

[Der Martin]

Hallo Rolf,

Du kannst input-Inhalte nach Verlassen des Feldes natürlich per Script formatieren.

das sollte man aber nicht tun, finde ich. Denn das wirkt überheblich: "Ich weiß, was du meinst, und ich weiß im Gegensatz zu dir auch, wie man es richtig schreibt."

Natürlich sollte ein Programm mit Eingaben möglichst flexibel und fehlertolerant umgehen, aber bitte nicht dem Nutzer über den Mund fahren.

a && b ergibt a wenn a falsy ist und b, wenn a truthy ist.
a || b ergibt a, wenn a truthy ist und b, wenn a falsy ist.

Bist du sicher? Dann würde true && false false ergeben. Ein völlig unerwartetes Ergebnis. Meines Wissens ist dieses Auswahl-Verfahren nur beim Oder-Operator richtig.

EDIT: Nochmal drüber nachgedacht ... ähm, doch, stimmt doch! Was fasel ich da für einen Quatsch?

Demnach ist parseFloat(xyz) || 0 ein einfaches Mittel, um ein NaN Ergebnis auf 0 umzusetzen.

Ja, aber tückisch, weil Javascript wohl so ziemlich die einzige Sprache, die den Oder-Operator so implementiert.

Live long and pros healthy,
 Martin

[Matthias Apsel]

Hallo Der Martin,

a && b ergibt a wenn a falsy ist und b, wenn a truthy ist.
a || b ergibt a, wenn a truthy ist und b, wenn a falsy ist.

Bist du sicher? Dann würde true && false false ergeben. Ein völlig unerwartetes Ergebnis.

Wahrum?

Das logische UND ist nur dann wahr, wenn beide Operanden wahr sind.

Bis demnächst
Matthias

[Tabellenkalk]

Hallo,

Das logische UND ist nur dann wahr, wenn beide Operanden wahr sind.

Diese Aussage ist hier nicht hilfreich, weil es nicht darum geht, wahr/falsch zu bekommen, sondern tatsächliche Werte durchgereicht werden.
Das geht offenbar in JavaScript einerseits weil die entsprechenden Kurzschluss-Operatoren verwendet werden. Andererseits aber vor allem weil Werte truthy/falsy sein können.

Gruß
Kalk

[Matthias Apsel]

Hallo Tabellenkalk,

Das logische UND ist nur dann wahr, wenn beide Operanden wahr sind.

Diese Aussage ist hier nicht hilfreich, weil es nicht darum geht, wahr/falsch zu bekommen, sondern tatsächliche Werte durchgereicht werden.

Ich bezog mich auf des Martins Beispiel. true ist truthy, false ist falsy,

true && false ist richtigerweise false.

Oder ich habe das völlig falsch verstanden.

Bis demnächst
Matthias

[Der Martin]

Hi,

Das logische UND ist nur dann wahr, wenn beide Operanden wahr sind.

Diese Aussage ist hier nicht hilfreich, weil es nicht darum geht, wahr/falsch zu bekommen, sondern tatsächliche Werte durchgereicht werden.

zumal ich mein Durcheinander selbst schon erkannt und kommentiert habe.

Das geht offenbar in JavaScript einerseits weil die entsprechenden Kurzschluss-Operatoren verwendet werden. Andererseits aber vor allem weil Werte truthy/falsy sein können.

Beide Aussagen treffen auf C ebenfalls zu.
Aber in C liefern die logischen Operatoren immer nur ein true (1) oder false (0).

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Martin,

Aber in C liefern die logischen Operatoren immer nur ein true (1) oder false (0).

Das ist nicht nur in C so. In allen mir bekannten anderen Sprachen (außer JS eben) auch (bis auf das stdbool.h Mapping false=0 und true=1).

Sorry für das Durcheinander, das ich in deinem Kopf angerichtet habe 😉

Rolf

[Gunnar Bittersmann]

@@Der Martin

Dann würde true && false false ergeben. Ein völlig unerwartetes Ergebnis.

Du solltest deine Erwartungen nicht so hochschrauben. 🤪

Ja, aber tückisch, weil Javascript wohl so ziemlich die einzige Sprache, die den Oder-Operator so implementiert.

Du meinst, man sollte ein Feature einer Sprache nicht einsetzen, weil es ein Feature dieser Sprache ist? 🤔

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Rolf B]

Hallo Gunnar,

er meint völlig zu Recht, dass JavaScript eine Sprache von Sergio Leone ist. The Good, the Bad and the Ugly. Diese || Implementierung ist definitiv Tuco, auch wenn Douglas Crockford es nicht unter "Awful" oder "Bad" auflistet.

Rolf

[Gunnar Bittersmann]

@@Rolf B

er meint völlig zu Recht, dass JavaScript eine Sprache von Sergio Leone ist.

JavaScript klingt doch gut. Morricone eben.

Diese || Implementierung ist definitiv Tuco

Ich frag mich, warum das in anderen Sprachen nicht auch so implementiert ist. Sehr elegante Möglichkeit, einen Fallback anzugeben.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[1unitedpower]

Ich frag mich, warum das in anderen Sprachen nicht auch so implementiert ist. Sehr elegante Möglichkeit, einen Fallback anzugeben.

Viele Sprachen haben vergleichbare Operatoren:

• https://en.wikipedia.org/wiki/Null_coalescing_operator
• https://en.wikipedia.org/wiki/Elvis_operator

In JavaScript gibt es außerdem noch a ?? b. Der Ausdruck gibt b zurück falls a zu null oder undefined evaluiert, ansonsten wird a zurückgegeben.

[Der Martin]

Hallo,

Dann würde true && false false ergeben. Ein völlig unerwartetes Ergebnis.

Du solltest deine Erwartungen nicht so hochschrauben. 🤪

ja ja, lacht ihr nur. 🤓

Ja, aber tückisch, weil Javascript wohl so ziemlich die einzige Sprache, die den Oder-Operator so implementiert.

Du meinst, man sollte ein Feature einer Sprache nicht einsetzen, weil es ein Feature dieser Sprache ist? 🤔

Ähm ... eher weil es ein Feature nur dieser Sprache ist.

Siehste, sowohl Javascript als auch PHP werden oft mit dem Attribut "C-ähnliche Syntax" beschrieben. Das birgt die Gefahr, dass man dann auch annimmt, die Semantik wäre ebenfalls C-ähnlich.

Deswegen würde ich, wenn ich denn ein Feature nutze, dass so von der Erwartung abweicht, zumindest mit einem Kommentar im Code deutlich darauf hinweisen.

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Martin,

Kommentar

das ist aus Sicht eines Multi-Sprachnutzers vermutlich nahe liegend. Ein JavaScript Schwerpunktprogrammierer würde dagegen die Schultern zucken und den Kommentar genauso löschen, wie Du den hier löschen würdest:

const j = 17;   // Konstante j auf 17 initialisieren

Die || Notation um einen Default für falsy-Werte zu erzeugen ist in JS durchaus üblich, genauso wie a >>> 0 dazu dient, einen nicht numerischen Wert in a durch 0 zu ersetzen.

Idiomatisch und idiotisch liegen nun mal nahe beieinander 😉

Rolf

[Gunnar Bittersmann]

@@Der Martin

ja ja, lacht ihr nur. 🤓

Aber gerne doch.

Du meinst, man sollte ein Feature einer Sprache nicht einsetzen, weil es ein Feature dieser Sprache ist? 🤔

Ähm ... eher weil es ein Feature nur dieser Sprache ist.

Dann sollte man in C (C++) auf Pointer verzichten‽

Ich glaube, dein Argument hat so seine Schwächen.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Der Martin]

Hallo,

Du meinst, man sollte ein Feature einer Sprache nicht einsetzen, weil es ein Feature dieser Sprache ist? 🤔

Ähm ... eher weil es ein Feature nur dieser Sprache ist.

Dann sollte man in C (C++) auf Pointer verzichten‽

warum? Das ist schließlich ein Konzept vieler Sprachen.

Ich glaube, dein Argument hat so seine Schwächen.

Kann schon sein, aber das war dann ein schlechtes Beispiel.

Live long and pros healthy,
 Martin

[Franz]

Danke...

Je weiter ich gehe, desto mehr Fragen tun sich auf!

Da ich mein Script auf mehreren Seiten hernehmen möchte, kann es sein, das manchmal die ein oder andere Variable nicht existiert. Wenn das der Fall ist, wird das Script nicht ausgeführt. Gibt es eine Möglichkeit, so eine eingelesene Variable, dann einfach auf 0 zu setzen. So dass das Script trotzdem ausgeführt wird.

let summe_1 = 	getInputAsFloat(document.formular.FeldWert1) +
					getInputAsFloat(document.formular.FeldWert2) +
					getInputAsFloat(document.formular.FeldWert3) +
					getInputAsFloat(document.formular.FeldWert4) +
					getInputAsFloat(document.formular.FeldWert5) +
					getInputAsFloat(document.formular.FeldWert6);

[Gunnar Bittersmann]

@@Franz

Gibt es eine Möglichkeit, so eine eingelesene Variable, dann einfach auf 0 zu setzen. So dass das Script trotzdem ausgeführt wird.

War das eine Frage.

Und ja, gibt es. Wurde in diesem Thread sogar schon genannt.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Franz]

Ja, habe ich gesehen und umgesetzt, aber ich meine, wenn ich versuche eine Variable einzulesen, die es gar nicht gibt.

Wenn wie hier 4,5,6 gar nicht übermittelt wurden, weil sie überhaupt nicht vorhanden sind... Wenn sie da sind und nur keinen Eintrag haben geht es, aber eben nicht wenn sie nicht einmal deklariert wurden.

let summe_1 = 	getInputAsFloat(document.formular.FeldWert1) +
					getInputAsFloat(document.formular.FeldWert2) +
					getInputAsFloat(document.formular.FeldWert3) +
					getInputAsFloat(document.formular.FeldWert4) +
					getInputAsFloat(document.formular.FeldWert5) +
					getInputAsFloat(document.formular.FeldWert6);

[Matthias Apsel]

Hallo Franz,

getInputAsFloat(document.formular.FeldWert1 || 0);

Aber vielleicht solltest du zu beginn auf diese Weise alle Werte einsammeln.

let s1 = document.formular.FeldWert1 || 0;

Bis demnächst
Matthias

[Franz]

Also entweder stelle ich mich zu bl... an, oder irgendetwas funktioniert nicht

let summe_1 = 	getInputAsFloat(document.formular1.FeldWert1 || 0) +
						getInputAsFloat(document.formular1.FeldWert2 || 0) +
						getInputAsFloat(document.formular1.FeldWert3 || 0) 
						;	

und was ist der Unterschied:

let s1 = document.formular.FeldWert1 || 0;

Franz

[Matthias Apsel]

Hallo Franz,

Also entweder stelle ich mich zu bl... an, oder irgendetwas funktioniert nicht

Was liefern denn die Kontrollausgaben?

und was ist der Unterschied:

Es ist vielleicht übersichtlicher.

Bis demnächst
Matthias

[Tabellenkalk]

Hallo,

irgendetwas funktioniert nicht

gewöhn dich dran, irgendwas ist immer…

Aber erzähl doch mal genauer!

und was ist der Unterschied zwischen summe_1 und s1

summe als Variablenname ist sprechender als ein einzelnes s.

Und wenn du keine Funktion nimmst, die laut sprechendem Funktionsnamen ein Input entgegennimmt und ein Float ausgibt, kann es dir passieren, dass JS dir die Zeichenketten einfach verkettet statt zu addieren.

Gruß
Kalk

[Rolf B]

Hallo Franz,

natürlich wird dein Script ausgeführt. Es läuft nur auf einen Fehler und bricht ab. Das siehst Du in der Browser-Konsole.

Hä? Was ist das? Drücke die F12 Taste (wenn's das bei Dir nicht ist, suche in den Browser-Menüs oder in der Browser-Doku nach "Entwicklerwerkzeugen" oder "Developer Tools".

Die Entwicklerwerkzeuge haben bei den gängigen Browsern alle ein Tab-Layout mit Seiten für: DOM Inspektor (oder "Elements"), Console, Quellcodes (oder "Sources"), Netzwerkverkehr. Und noch mehr Seiten.

Mit dem DOM Inspektor kannst Du überprüfen, was der Browser und deine Scripte aus deinem HTML gemacht haben

Auf der Sources Seite siehst Du die geladenen Dateien (HTML, CSS, Script). In Skripten kannst Du Breakpoints setzen (meistens mit Klick auf die Zeilennummer, dann gibt's einen roten Punkt). Möchte der Browser diese Zeile ausführen, hält er an und du kannst deine Variablen inspizieren und mit den Buttons auf dieser Seite einfach fortsetzen, oder Schritt für Schritt dem Code folgen.

In der Konsole erscheinen Meldungen, die Du im Script mit console.log() ausgibst, und alle Fehlermeldungen. Du kannst da auch direkt JavaScript eingeben, es wird sofort ausgeführt.

Ich würde behaupten, dass bei Dir dort etwas wie dies hier steht (so wie hier zeigt es Chrome an):

Uncaught TypeError: Cannot read property 'value' of undefined
    at getInputAsFloat (<anonymous>:2:34)

Er will das Property value lesen. Und zwar auf einem undefined-Wert. In Zeile 2, Spalte 34 von getInputAsFloat.

Watson, das kriegen Sie raus. Wieso ist da undefined? Wie fange ich das ab?

Rolf

[Franz (in den grossen Stiefel von Watson)]

Aber wie fange ich den Fehler ab?

ich habe es hier mal engestellt

https://jsfiddle.net/2bwLfxz5/

Einmal so das es geht, und einmal nicht funktionierend. Vielleicht kann mir ja Sherlock helfen, ich nehme auch jeden anderen Detektiv oder Mechaniker, der es weis.

Franz

[Rolf B]

Hallo Franz,

ich sag's Dir nicht vor. Dazu ist es eigentlich zu trivial, und es ist einfach ideal, um in den Umgang mit Fehlern einzusteigen. Um damit korrekt umzugehen, brauchst Du natürlich Kenntnisse über die bedingten Anweisungen in JavaScript. Ich nehme mal an, dass Du bisher nur lineare Abläufe programmiert hast. Du kannst Dir auch gerne andere Einsteiger-Tutorials in der JavaScript-Abteilung unseres Wikis anschauen.

Die 3 Fehlermeldungen in der Konsole hast Du gefunden? Ist Dir klar, in welcher Variablen im Moment des Fehlers ein undefined-Wert steht?

Rolf

[Franz]

du meiste diese

Uncaught TypeError: element.value is undefined
    getInputAsFloat http://localhost/test/rechner.js:23
    bp_calculate http://localhost/test/rechner.js:10
    onkeyup http://localhost/test/formular.php:1

Ich denke mal das man den Fehler in der Funktion getInputAsFloat abfangen kann, könnte, muss!

function getInputAsFloat(element) {

#
# Wahrscheinlich hier?
#
  return parseFloat(element.value.replace(/[^0-9 ]/g, "")) || 0;
}

Der Wald hat sehr viele Bäume, aber ich sehe keine ;_)

[Rolf B]

Hallo Franz,

so weit, so gut, und Du denkst richtig.

Uncaught TypeError: element.value is undefined

Das ist die Firefox-Meldung? Chrome meldet

Uncaught TypeError: Cannot read property 'replace' of undefined

Was auf's gleiche hinausläuft, weil replace ja auf das Ergebnis von element.value angewendet wird.

Tatsächlich zeigt diese Fehlermeldung aber, dass Du zwei Problemstellen hast. Einmal beim Aufruf von getElementAsFloat, und einmal innerhalb von getElementAsFloat. Die Frage, warum element.value zu undefined ausgewertet wird, braucht schon etwas Spürsinn.

Frage 1: Welcher Wert entsteht aus document.formular_n.Wert4n, wenn es das Feld Wert4n nicht gibt?

Frage 2: Und welcher Wert entsteht dann aus document.formular_n.Wert4n || 0?

Frage 3: Wenn der so entstehende Wert in getElementAsFloat hineingegeben wird, was entsteht dann aus element.value?

Frage 4: Ist das || 0 in Frage 2 eine gute Idee? (Tipp: Die Antwort lautet „Nein“)

Frage 5: Wie kannst Du in getElementAsFloat mit der Situation umgehen, dass dass in element das Ergebnis aus Frage 1 hereinkommt? (Tipp: if)

Zum Beantworten solcher Fragen kann es helfen, sich Teilergebnisse anzuschauen. Im Firefox musst Du aber von https auf http zurückschalten (in der Adresszeile das s von https entfernen und ENTER drücken), sonst bekommst Du den Sourcecode im Ergebnisfenster nicht zu sehen. Du findest ihn dann im Zweig fiddle.jshell.net / 2bwLfxz5/show / (index).

Setze in der Debugger-Ansicht der Firefox-Entwicklertools einen Breakpoint auf die let summe_1 = ... Zeile (Klick auf die Zeilennummer davor, es kommt ein roter Punkt blauer Pfeil (roter Punkt ist Chrome) - nochmal klicken entfernt ihn).

Tipp eine Ziffer in eins der Eingabefelder, und er sollte anhalten.

Schau Dir dann an, welche Werte die fraglichen Teilausdrücke von oben ergeben. Das geht entweder durch Eintippen der Teilausdrücke in die Konsole, oder mit der Maus. Halte die Maus einfach mal über Wert4n in document.formular.Wert4n. Bei komplexeren Ausdrücken geht das nicht mehr, du kannst aber den fraglichen Ausdruck mit der Maus markieren, rechte Maustaste drücken und "evaluieren in Konsole" nutzen.

Um element.value zu untersuchen, muss er natürlich erstmal in die Funktion hineingelaufen sein. Einen Einzelschritt in eine Funktion hinein machst Du mit der F11-Taste. Mit der F8-Taste setzt Du den Programmablauf fort.

Rolf

[Franz]

Erstmal, vielen Dank das du so eine Geduld mit mir hast.

Bin ich hie auf dem richtigen Weg?

function getInputAsFloat(element) {
	
	if(typeof element.value == 'undefined'){
		// Hier müsste dann die fehlende Variable angelegt werden... (denke ich)
	 }
 
  let inhalt = element.value.replace(/[^0-9 ]/g, "");
  let value = parseFloat(inhalt);
  return value;
}

[Rolf B]

Hallo Franz,

if (typeof element.value == 'undefined') {
   ...
}

das würde Dir isoliert betrachtet tatsächlich helfen, aber das Ergebnis wäre unterm Strich nicht ordentlich. Es funktioniert nämlich nur, wenn dieses || 0 beim Aufruf von getInputAsFloat stehen bleibt, das sollte es aber nicht. Ich beantworte mal einen Teil meiner Fragen von vorhin:

Frage 1: Welcher Wert entsteht aus document.formular_n.Wert4n, wenn es das Feld Wert4n nicht gibt?

Das Ergebnis ist undefined

Frage 2: Und welcher Wert entsteht dann aus document.formular_n.Wert4n || 0?

Da undefined als falsy betrachtet wird (siehe auch meinen Abschnitt "Was ist Wahrheit" im Self-Wiki), gibt der || Operator seinen rechten Operanden zurück. Der Wert des Ausdrucks ist daher 0.

Frage 4: Ist das || 0 in Frage 2 eine gute Idee?

Nein. Der Ausdruck liefert dann entweder ein Objekt vom Typ HTMLInputElement oder die Zahl 0. Ausdrücke, die gemischte Typen zurückliefern, sind schlechter Stil, das sollte man meiden. Das || 0 wegzulassen ist besser. undefined ist zwar auch ein anderer Typ (undefined ist der einzige Wert des undefined Typs), aber es ist immerhin der übliche Wert für „da existiert etwas nicht“. Und wenn man schon zwischen Typen unterscheiden muss, dann mit möglichst wenig Code.

Lass also diese || 0 Korrektur im Aufruf weg. Du bekommst bei fehlenden Feldern dann undefined in die Funktion hinein. Und nun überlege Dir, wie Du damit umgehst, dass in element dieser Wert drinsteht.

Eine Variable anzulegen ist jedenfalls nicht nötig. Welche sollte es sein? Und warum überhaupt? Welchen Wert erwartest Du von getInputAsFloat denn sinnvollerweise zurück, wenn das input-Element nicht existiert?

Ich hätte aber zu dieser Codezeile noch allgemeine Anmerkungen:

• statt typeof irgendwas == 'undefined' kannst Du auch direkt mit der eingebauten Konstanten undefined vergleichen. Dabei ist auf das Dreifachgleich zu achten, weil das Doppelgleich versucht, die verglichenen Werte aneinander anzupassen, wenn sie verschiedene Typen haben. Beispielsweise würden Abfragen wie null == undefined oder 0 == "" behaupten, das sei gleich.

if (irgendwas === undefined) {
   ...
}

• wenn Du genau weißt, dass bei einer Abfrage entweder ein Objekt oder undefined oder null vorkommt, dann kannst Du ausnutzen, dass ein Objekt immer truthy ist und die Werte undefined und null falsy sind (hast Du „Was ist Wahrheit“ gelesen?).

Ein gültiges input-Element wird also als truthy betrachtet. Und damit kannst Du kompakt schreiben:

if (element) {
   // Element ist da
}

// oder

if ( !element ) {
   // Element ist nicht da
}

Solche Abfragen sind sprachtypisch für JavaScript, davor solltest Du keine Angst haben.

Rolf

[Franz]

ich gehe jetzt in den Keller und trinke was :_)

function getInputAsFloat(element) {
	
	if(!element){
		return 0;
		} 
	else{
		let inhalt = element.value.replace(/[^0-9 ]/g, "");		
		let value = parseFloat(inhalt);
		return value|| 0;
		}

	}

[Rolf B]

Hallo Franz,

ich bin schon im Keller und schwitze (weil da eine Glastür ist und die Sonne draufscheint) 🥵

Wenn Du das || 0 beim Aufruf entfernt hast, dann bist Du jetzt richtig.

Um Dir noch etwas Stress zu machen: JavaScript ist ja wie C oder APL eine Sprache, die einzeilige Programme beliebiger Komplexität erlaubt:

function getInputAsFloat(element) {
	return element?parseFloat(element.value.replace(/[^0-9 ]/g, ""))||0:0;
}

Versteht nur (fast) keiner mehr... 🤓

Rolf

[Franz]

Jetzt möchte ich das Ganze ein wenig aufräume, und es mir für spätere Änderungen leichte machen deshalb lege ich die zwei Funktionen in zwei unterschiedliche Dateien.

Dies binde ich hintereinander ein.

Doch jetzt geht’s nicht mehr, nur wenn die beiden Funktionen in einer Datei aufgerufen werden??

datei 1

function getInputAsFloat(element) {
	return element?parseFloat(element.value.replace(/[^0-9 ]/g, ""))||0:0;
}

datei 2

function rechnen() {
let summe_1 = 	getInputAsFloat(document.formular1.FeldWert1 || 0) +
						getInputAsFloat(document.formular1.FeldWert2 || 0) +
						getInputAsFloat(document.formular1.FeldWert3 || 0) 
						;	
}

[Rolf B]

Hallo Franz,

doch, das muss gehen. Im gezeigten Script liegt der Fehler nicht, höchstens in der Art der Einbindung.

Du musst schon spezielle Maßnahmen ergreifen, damit eine Funktion nicht global sichtbar wird. Von diesen Maßnahmen weißt Du mutmaßlich überhaupt nichts und hast sie darum auch nicht ergriffen.

Guck in die Entwicklerwerkzeuge. In die Konsole und den Netzwerktrace. Gibt es Ladefehler? Gibt es JavaScript-Fehlermeldungen?

Sehen deine beiden .js Dateien genau so aus wie die beiden Codeblöcke da oben? Oder ist da noch mehr? Bindest Du die rechnen-Funktion immer noch über onkeyup="rechnen()" an? (was übrigens falsch wäre, das sollte `oninput="rechnen()" sein um auch ein Copy+Paste mit der Maus zu unterstützen)

---

Das Aufteilen von Code in viele kleine Dateien ist für eine Browserseite allerdings ein zweischneidiges Schwert. Wenn Du getInputAsFloat von vielen Stellen aus benutzt, dann kann es sinnvoll sein, sie in einer zentralen Toolbox-Datei unterzubringen. Wenn zwei Funktionen dagegen wirklich zusammengehören, also z.B. die Funktion x nur von der Funktion y aufgerufen wird, dann können die beiden auch in einer Datei liegen.

Pro:

• klare Strukturierung
• keine Riesendateien im Editor

Contra:

• Es kostet VIEL Zeit, diese Häppchen zu laden.
• Man muss im Editor häufig zu einer anderen Datei wechseln.

Profi-Entwickler machen es so, dass sie Funktionen thematisch zu .js Dateien gruppieren und während der Entwicklung diese Dateien auch einzeln laden. Für das Deployment auf den Produktionsserver werden sie aber mittels eines speziellen Tools gebündelt. D.h. alle Scripte, die auf einer Seite geladen werden, werden aneinander gehängt. Ein weiteres Tool kann sie dann auch noch minifizieren, d.h. lange Variablennamen in kurze umwandeln und bestimmte Formulierungen im Code kürzer machen. Das Ergebnis ist total hässlich und unlesbar, weshalb man solche Tools auch „uglifier“ nenne.

Wenn man nur zwei bis fünf Funktionen hat, sollte man sich um Minifizierung und Codeverteilung überhaupt keine Gedanken machen. Einfach in eine Datei und gut ist. Wenn das Projekt größer wird, sollte man aber - nicht zu spät - mit Strukturierung und Modularisierung anfangen. Leider beherrscht der Internet Explorer die mit ECMAScript 6 eingeführte native Modularisierung nicht (Artikel bei Mozilla), wenn Du den also unterstützen willst, brauchst Du Tools wie require.js als reiner Module Loader, oder große Transpiler wie Babel oder TypeScript; die können das als Nebeneffekt, haben aber erstmal eine steile Lernkurve.

Rolf

[Der Martin]

Hallo,

ich gehe jetzt in den Keller und trinke was :_)

du trinkst im Keller? 😀
Ich gehe höchstens in den Keller, um mir was zum Trinken zu holen.

function getInputAsFloat(element) {
	
	if(!element){
		return 0;
		} 
	else{
		let inhalt = element.value.replace(/[^0-9 ]/g, "");		
		let value = parseFloat(inhalt);
		return value|| 0;
		}

	}

Hmm. Zwei Variablen eingeführt für nix und wieder nix. Jeden Schritt einzeln. Meine Vorstellung von übersichtlich oder gar effizient ist das nicht. Also jetzt nochmal dasselbe, ohne die Flasche nach jedem Schluck wieder abzustellen:

function getInputAsFloat(element)
 { return (element
         ? parseFloat(element.value.replace(/[^0-9 ]/g, "")) || 0
         : 0);
 }

Sieht doch gleich viel kompakter und klarer aus, finde ich.

Und dann wäre da noch was: Die Namensgebung sagt, dass du einen float-Wert erwartest, also eine gebrochene Zahl. Dein radikales replace bügelt aber alles weg, was keine Ziffer ist. Eine Eingabe von 3.14 kommt also als 314 zurück, -1.5 als 15. Soll das so sein?

Und was ist mit sehr großen oder sehr kleinen Zahlen? Wenn Eingaben in der Größenordnung von Millionen realistisch sind, möchte ich die schon ganz gern als 7.5E+6 eingeben dürfen.

Möchtest du also vielleicht dein replace() noch entschärfen?

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Und was ist mit sehr großen oder sehr kleinen Zahlen? Wenn Eingaben in der Größenordnung von Millionen realistisch sind, möchte ich die schon ganz gern als 7.5E+6 eingeben dürfen.

TIL dass es die Schreibweise auch in CSS gibt. (Wobei das T für „vor ein paar Tagen/Wochen“ steht).

Für einen großen Wert hatte ich in der CSSBattle vorher 999in geschrieben, aber 1e6% ist kürzer.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Franz]

Ja, das stimmt es schaut schöner aus, aber ich war zu erst erstmal froh das es funktioniert. Jetzt auf den zweiten Blick... ja... okey..

Das könnte theoretisch im Feld stehen,

100 1.000 1.000 € 1.000,10 € 0.54

Deshalb das replace(/[^0-9 ]/g, "") und Kommazahlen brauche ich nicht.

Aber vielleicht sollte man e snochmal überdenken.

[Der Martin]

Hallo,

Das könnte theoretisch im Feld stehen,

100
1.000
1.000 €
1.000,10 €
0.54

Deshalb das replace(/[^0-9 ]/g, "") und Kommazahlen brauche ich nicht.

ganz sicher? Sieht aus, als würdest du mit Währungsbeträgen hantieren. Und da sind gebrochene Werte etwas völlig Normales. Wenn ich also 119.80 eingebe, wäre ich "not amused", wenn die Software daraus fast 12000 EUR machen würde. Es sei denn, ich soll den Betrag kriegen anstatt bezahlen 😉

Allerdings kommt dann das leidige Thema Tausender-Trennzeichen, das sich manche Leute einfach nicht abgewöhnen wollen. Da braucht's dann eine gewisse Heuristik, um zu erkennen erraten, ob der Punkt nun ein Tausender- oder ein Dezimaltrennzeichen sein soll.

Aber vielleicht sollte man e snochmal überdenken.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Wenn ich also 119.80 eingebe, wäre ich "not amused", wenn die Software daraus fast 12000 EUR machen würde. Es sei denn, ich soll den Betrag kriegen anstatt bezahlen 😉

Allerdings kommt dann das leidige Thema Tausender-Trennzeichen, das sich manche Leute einfach nicht abgewöhnen wollen. Da braucht's dann eine gewisse Heuristik, um zu erkennen erraten, ob der Punkt nun ein Tausender- oder ein Dezimaltrennzeichen sein soll.

Gerade wenn’s um Geld geht, sollte man da nicht raten – aus dem von dir genannten Grund.

Da hilft nur, bei der Eingabe keine Tausendertrennzeichen zuzulassen.

Bei der Ausgabe kann man Zahlen ja dann formatieren, wenn’s denn sein muss. Statt einen Punkt zu machen, kann man der Eindeutigkeit wegen ein Leerzeichen verwenden – aber ein nicht umbrechendes, sonst sieht’s doof aus.

Und mit Ausgabe ist hier nicht das Überschreiben des Werts eines Eingabefelds gemeint.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Franz]

Da hilft nur, bei der Eingabe keine Tausendertrennzeichen zuzulassen.

Aber woher soll man wissen, ob es ein Tausender Punkt ist, oder aber nur ein Punkt(Komma)

Franz

[Matthias Apsel]

Hallo Franz,

genau das ist der Punkt.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

genau das ist der Punkt.

oder das Komma,

Rolf

[Rolf B]

Hallo Franz,

das weißt Du nicht. Zumindest nicht generisch, auf beliebigen Seiten.

Es gibt Hinweise.

(1) window.navigator.language - liefert Dir die Spracheinstellung im Browser. Aber ist das auch die Sprache, in der die Seite ausgeliefert wird?

(2) Es gibt das lang Attribut, das eigentlich auf's html Element gehört und die Sprache kennzeichnet, in der die Seite ausgeliefert wurde. Aber trotz Gunnars Predigten macht das lange^[1] nicht jeder. Und du bist auch nicht sicher, dass es lang nur auf dem html Element gibt.

Eingabe von Zahlen mit Tausendertrenner UND Dezimalzeichen ist tatsächlich ein Drama.

Auf deiner eigenen Seite hast Du bessere Chancen, weil Du da weißt, wie die Sprachauswahl funktioniert. Oder weil Du weißt, dass Du eh nur deutsche Anwender hast, je nach dem. Wenn Du Deine User kennst, oder die dich, dann kann man Vereinbarungen zur Zahleneingabe treffen.

Deine direkte Interaktivität hilft den Usern auch dabei, Fehlinterpretationen von Punkt und Komma zu vermeiden.

Und auch das rettet Dich nicht, wenn Du jemanden am Gerät sitzen hast, der durch Excel final verpunktet ist und sich weigert, ein Dezimalkomma zu verwenden. Es ist am Besten, Tausendertrennzeichen nicht zu beachten und Punkt UND Komma als Dezimaltrennzeichen zu verwenden. Dann reicht allerdings deine getInputAsFloat nicht mehr hin, dann musst Du Kommas durch Punkte ersetzen und den ganzen Rest entfernen. Das sind zwei Replaces. Nebeneffekt: parseFloat("123.456.789") ergibt 123.456. Das könnte man als GIGO^[2] definieren, oder man könnte es in drei Schritten machen:

1. ist value.replace(/[^.,]/g,"").length > 1 (mehr als 1 Trennzeichen) -> Fehler
2. Ersetze Kommas durch Punkte
3. Ersetze alles außer 0123456789. durch "".

Alternativ zu 3. kannst Du auch mit value.match(/^0-9.]/) prüfen, ob irgendein unerwartetes Zeichen in der Eingabe ist und eine Fehlermeldung anzeigen.

Mit der E Notation (1.2E7 für 12 Millionen) würde ich die Eingabe nicht belasten. Das kommt im kaufmännischen Bereich nicht vor.

Rolf

---

1. sorry for me being punny ↩︎

2. Garbage In - Garbage Out ↩︎

[Der Martin]

Hi,

Mit der E Notation (1.2E7 für 12 Millionen) würde ich die Eingabe nicht belasten. Das kommt im kaufmännischen Bereich nicht vor.

im technischen Kontext aber durchaus. Nur dass Ingenieure 12 Millionen eher als 12E6 schreiben würden (oder eben 12M).

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Rolf B

Mit der E Notation (1.2E7 für 12 Millionen) würde ich die Eingabe nicht belasten. Das kommt im kaufmännischen Bereich nicht vor.

Aber hallo‽ Ich schreib doch nicht unzählige Nullen, wenn ich meinen Kontostand angebe.
*dagobert duck und weg*

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[JürgenB]

Hallo Gunnar,

*dagobert duck und weg*

da hast du noch ein ganz anderes Problem:

15 Stellen Double-Precision 4 Stellen hinter dem Komma 100stel Cent

da bleiben noch 11 Stellen vor dem Komma. Ob es da wohl einen Overflow-Error gibt?

Gruß
Jürgen

[MudGuard]

Hi,

Da hilft nur, bei der Eingabe keine Tausendertrennzeichen zuzulassen.

Aber woher soll man wissen, ob es ein Tausender Punkt ist, oder aber nur ein Punkt(Komma)

Indem man für die Euro und die Cent getrennte Eingabefelder vorgibt, weiß man, daß Kommata und Punkte im Euro-Feld nicht die Trenner zwischen ganzzahligem und gebrochenem Teil sein können und kann sie restlos entsorgen ...

Ist z.B. bei meinem Online-Banking so gemacht.

cu,
Andreas a/k/a MudGuard

[JürgenB]

Hallo Andreas,

Aber woher soll man wissen, ob es ein Tausender Punkt ist, oder aber nur ein Punkt(Komma)

Indem man für die Euro und die Cent getrennte Eingabefelder vorgibt, weiß man, daß Kommata und Punkte im Euro-Feld nicht die Trenner zwischen ganzzahligem und gebrochenem Teil sein können und kann sie restlos entsorgen ...

Ist z.B. bei meinem Online-Banking so gemacht.

und wie funktioniert dann C&P von der Rechnung in die Überweisung?

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

und wie funktioniert dann C&P von der Rechnung in die Überweisung?

<aside role="scherz">Dafür hat die Bank bestimmt ein Plugin für den Internet Explorer bereitgestellt.</aside>

Also ganz ehrlich, diese Eingabeform ist mir noch nie untergekommen, und es ist eigentlich eine Kapitulation vor der Situation...

Rolf

[JürgenB]

Hallo Rolf,

und wie funktioniert dann C&P von der Rechnung in die Überweisung?

…

Also ganz ehrlich, diese Eingabeform ist mir noch nie untergekommen, und es ist eigentlich eine Kapitulation vor der Situation...

für mich ist das die normale. Warum soll ich etwas vom Bildschirm, an dem ich sitze, abtippen.

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

hä? Witzbold 🤡. Ich hätte wohl mehr zitieren müssen...

Die Kapitulation ist die Trennung in € und ct, nicht das C&P

Rolf

[JürgenB]

Hallo Rolf,

Die Kapitulation ist die Trennung in € und ct, nicht das C&P

ach so 😎

Gruß
Jürgen

[Der Martin]

Hallo Jürgen,

und wie funktioniert dann C&P von der Rechnung in die Überweisung?

nicht. ;-)

Also ganz ehrlich, diese Eingabeform ist mir noch nie untergekommen, und es ist eigentlich eine Kapitulation vor der Situation...

für mich ist das die normale. Warum soll ich etwas vom Bildschirm, an dem ich sitze, abtippen.

Ähm, Rolf meinte mit Eingabeform wohl eher die getrennten Eingabefelder für Euro und Cent. Dass die suboptimal ist, finde ich auch. Nicht nur wegen des nicht funktionierenden C&P.

Aber ich habe das auch schon bei zahlreichen Formularen gesehen - sogar Print-Formularen.

Live long and pros healthy,
 Martin

[1unitedpower]

function getInputAsFloat(element)
 { return (element
         ? parseFloat(element.value.replace(/[^0-9 ]/g, "")) || 0
         : 0);
 }

Sieht doch gleich viel kompakter und klarer aus, finde ich.

Mit dem optional-chaining-operator geht es noch ein klitzekleinses Bisschen einfacher:

function getInputAsFloat (element) {
  return parseFloat(element?.value?.replace(/\D/g, '')) || 0
}

[Gunnar Bittersmann]

@@1unitedpower

Mit dem optional-chaining-operator geht es noch ein klitzekleinses Bisschen einfacher:

Nicht dass ich den nicht schon kannte, ich frag mich bloß, warum ich den bei meiner hiergezeigten Formatierung im Eingabeld nicht verwendet hatte. Jetzt aber

	ccInputElement.value = parts.length ? parts.join(' ') : '';

ersetzt durch

	ccInputElement.value = parts?.join(' ') || '';

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Rolf B]

Hallo Gunnar,

ich kannte den, aber nicht aus JavaScript sondern aus C#. In Java scheinen sie es ja gewohnt umständlich mit der Optional<T> Klasse gelöst zu haben statt kompakt mit einem Operator.

Aber damit setzen wir den armen Franz endgültig ins verwahrloste Taxi und jagen ihn quer durch Bayern… (dieser Scherz ist nur für Windows-User verständlich)

Rolf

[Gunnar Bittersmann]

@@Rolf B

Aber damit setzen wir den armen Franz endgültig ins verwahrloste Taxi und jagen ihn quer durch Bayern… (dieser Scherz ist nur für Windows-User verständlich)

Nö. Aber nur für Deutschspachige.

Für Englischsprachige bespringt ein schneller Fuchs einen lahmen Hund.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Für Englischsprachige bespringt ein schneller Fuchs einen lahmen Hund.

over, not on. Und faul.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Für Englischsprachige bespringt ein schneller Fuchs einen lahmen Hund.

over, not on.

Das ist nicht witzig.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Für Englischsprachige bespringt ein schneller Fuchs einen lahmen Hund.

over, not on.

Das ist nicht witzig.

Warum? Was hab ich nicht verstanden?

Bis demnächst
Matthias

[Der Martin]

Hallo Matthias,

Für Englischsprachige bespringt ein schneller Fuchs einen lahmen Hund.

over, not on.

Das ist nicht witzig.

Warum? Was hab ich nicht verstanden?

was immer es ist: Ich hab's auch nicht verstanden.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Aber damit setzen wir den armen Franz endgültig ins verwahrloste Taxi und jagen ihn quer durch Bayern…

Für Englischsprachige bespringt ein schneller Fuchs einen lahmen Hund.

Und für alles gibt’s ein Fremdwort: Pangramm.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Rolf B]

Hallo Martin,

du hast aber schon gesehen, dass ich ihm diese Aufteilung zum leichteren Debugging empfohlen hatte?

Dass man das für Produktionscode wieder zurückbauen kann, ist eine andere Frage. Und ich würde annehmen, dass der V8 JIT die Variablen eh wegoptimiert, also was solls. Der Lesbarkeit hilft es.

Rolf

[Der Martin]

Hallo Rolf,

du hast aber schon gesehen, dass ich ihm diese Aufteilung zum leichteren Debugging empfohlen hatte?

das habe ich wohl entweder übersehen oder verdrängt. 😉

Dass man das für Produktionscode wieder zurückbauen kann, ist eine andere Frage. Und ich würde annehmen, dass der V8 JIT die Variablen eh wegoptimiert, also was solls. Der Lesbarkeit hilft es.

YMMV. Ich tue mich mit dem Lesen (und vor allem Verstehen) deutlich schwerer, wenn etwas, was für mich gedanklich ein Schritt ist, in mehrere kleine Microschritte gesplittet wird.
Damit meine ich nicht das Entzerren auf mehrere Zeilen, sondern das Stückeln in mehrere abgeschlossene Anweisungen. Da geht mir leicht der Zusammenhang verloren.

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Martin,

was für mich gedanklich ein Schritt ist

Für Dich...

YMMV

Eben. Aber Du hast Siebenmeilenstiefel und rennst Marathon ohne ins Schwitzen zu kommen, und Franz sitzt noch mit Badeschlappen in seinem komplett verwahrlostes Taxi.

Rolf

[Gunnar Bittersmann]

@@Franz

Ich hab mal eine Formatierung für Kreditkartennummern (4er-Blöcke) gebaut. Das ließe sich auch auf andere Formatierungen übertragen. Ob die von dir angedachte sinnvoll ist, ist eine andere Frage – keine unwichtige.

Besonderes Augenmerk muss man dabei auf die Cursorposition legen. Der Cursor muss nach der Umformatierung wieder hinter demselben Zeichen stehen wie vorher.

Einen Fehler hat die Lösung noch: Wenn der Cursor nach einem Leerzeichen steht (z.B. bei 1234 5678 direkt vor der 5), dann wird beim Drücken der Delete-Taste nicht die vorige Ziffer (die 4) gelöscht. (Es wird das Leerzeichen gelöscht und sofort wieder eins eingefügt.) Man muss den Cursor vor das Leerzeichen setzen, um die Ziffer zu löschen.

Wie kriegt man das behoben?

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Einen Fehler hat die Lösung noch: Wenn der Cursor nach einem Leerzeichen steht (z.B. bei 1234 5678 direkt vor der 5), dann wird beim Drücken der Delete-Taste nicht die vorige Ziffer (die 4) gelöscht. (Es wird das Leerzeichen gelöscht und sofort wieder eins eingefügt.) Man muss den Cursor vor das Leerzeichen setzen, um die Ziffer zu löschen.

Wie kriegt man das behoben?

keydown-Event abfangen; wenn Backspace gedrückt wurde und kein Bereich selektiert wurde: zwei Zeichen löschen, Cursor wieder richtig positionieren.

Im Codepen ergänzt.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!