Zahlenformat in Java Rechnung
betking99
- javascript
3 J o0 Matthias Apsel0 J o1 JürgenB0 Felix Riesterer0 Gunnar Bittersmann
Hallo Zusammen,
ich bräuchte mal eure Hilfe. Unten habe ich meine funktionierende js Datei eingefügt.
Das Ergebnis ist eine Zahl, die in "betrag1" an ein html übergeben und ausgegeben wird. Diese Zahl hat meist 7-10 STellen. d.h. Zahlen als 123456789 ist nicht wirklich gut zu lesen. Daher möchte ich das Ergebnis als: 123.456.789 ausgeben. Nur wie bekomme ich das hin? Ich scheitere.
Kann mir irgendjemand helfen?
document.addEventListener('DOMContentLoaded', function () {
function rechne() {
var bnahrung = document.getElementById('bnahrung'),
bholz = document.getElementById('bholz'),
bsilber = document.getElementById('bsilber');
bspnahrung = document.getElementById('bspnahrung');
bspholz = document.getElementById('bspholz');
bsilber = document.getElementById('bsilber');
var summe = bnahrung.valueAsNumber / 1000 + bholz.valueAsNumber * 3 / 160 + bsilber.valueAsNumber * 5 / 40 + bspnahrung.valueAsNumber * 1500 + bspholz.valueAsNumber * 4500 + bspsilber.valueAsNumber * 7500;
summe = summe.toFixed(0);
document.getElementById('betrag1').value = summe;
}
document.getElementById("myForm1").addEventListener("input", rechne);
});
Hallo Zusammen,
ich bräuchte mal eure Hilfe. Unten habe ich meine funktionierende js Datei eingefügt.
Das Ergebnis ist eine Zahl, die in "betrag1" an ein html übergeben und ausgegeben wird. Diese Zahl hat meist 7-10 STellen. d.h. Zahlen als 123456789 ist nicht wirklich gut zu lesen. Daher möchte ich das Ergebnis als: 123.456.789 ausgeben. Nur wie bekomme ich das hin? Ich scheitere.
Kann mir irgendjemand helfen?
Schau dir mal .toLocalString() an :)
Gruß
Jo
Hallo betking99,
Java und JavaScript ist nicht dasselbe.
Bis demnächst
Matthias
Hey,
Java und JavaScript ist nicht dasselbe.
Ich hab es auch gesehen, war aber zu müde um das noch richtig zu stellen.
Gruß
Jo
@@Matthias Apsel
Java und JavaScript ist nicht dasselbe.
Kannst du das näher erläutern? Vielleicht mit ein paar Analogien? 😆
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
@@Gunnar Bittersmann
Java und JavaScript ist nicht dasselbe.
Kannst du das näher erläutern? Vielleicht mit ein paar Analogien? 😆
Haste den schon in deiner Sammlung? Java zu JavaScript wie anal zu Analogie.
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
Hallo Gunnar,
Haste den schon in deiner Sammlung? Java zu JavaScript wie anal zu Analogie.
oh, Glück gehabt. Ich habe beim flüchtigen Hinsehen schon Analorgie gesehen.
Live long and pros healthy,
Martin
Hi there
Java und JavaScript ist nicht dasselbe.
Gähn, schnarch, im Stehen einschlaf...
(scnr)
Hallo klawischnigg,
Gähn, schnarch, im Stehen einschlaf...
Schlimm, nicht? Dass man jeder neuen Schülergeneration immer wieder dasselbe erzählen muss. Genauso schlimm, dass verschiedene Menschen völlig unabhängig voneinander immer wieder dieselben Fehler machen.
Bis demnächst
Matthias
Hallo,
Genauso schlimm, dass verschiedene Menschen völlig unabhängig voneinander immer wieder dieselben Fehler machen.
Das kannste auch bei einunddemselben Menschen bobachten...
Gruß
Kalk
Hi,
Genauso schlimm, dass verschiedene Menschen völlig unabhängig voneinander immer wieder dieselben Fehler machen.
Das kannste auch bei einunddemselben Menschen bobachten...
ja, stimmt. Eigentlich ist es ein Merkmal der Spezies homo sapiens (aber nicht nur dieser), dass wir auch aus den Fehlern anderer lernen können. Das funktioniert aber nicht bei allen Individuen gleich gut.
Merke: Der Lerneffekt ist am wirksamsten, wenn's weh tut.
Live long and pros healthy,
Martin
Hi there,
Merke: Der Lerneffekt ist am wirksamsten, wenn's weh tut.
Also mir tun seine Java-Javascript-Vergleiche/Unterscheidungen schon weh...
Lieber klawischnigg,
Also mir tun seine Java-Javascript-Vergleiche/Unterscheidungen schon weh...
na, dann nichts wie drauf: Maus <-> Mausoleum :P
Liebe Grüße
Felix Riesterer
Hi there,
Also mir tun seine Java-Javascript-Vergleiche/Unterscheidungen schon weh...
na, dann nichts wie drauf: Maus <-> Mausoleum :P
wie grausam kannst Du sein...
Hallo Felix,
Maus <-> Mausoleum :P
ganz anders gelagert, aber mir fiel dazu gerade in Ausspruch von Kai Pflaume in der Sendung Frag doch mal die Maus[1] ein. Bei einem Wettbewerb sprach er da mal von der Weltmausterschaft.
Live long and pros healthy,
Martin
Eine Spiel- und Quizsendung, bei der Kinder die eigentlichen Stars sind. ↩︎
Guten Morgen,
ich bräuchte mal eure Hilfe.
Kann mir irgendjemand helfen?
document.addEventListener('DOMContentLoaded', function () { function rechne() { var bnahrung = document.getElementById('bnahrung'), bholz = document.getElementById('bholz'), bsilber = document.getElementById('bsilber'); bspnahrung = document.getElementById('bspnahrung'); bspholz = document.getElementById('bspholz'); bsilber = document.getElementById('bsilber'); var summe = bnahrung.valueAsNumber / 1000 + bholz.valueAsNumber * 3 / 160 + bsilber.valueAsNumber * 5 / 40 + bspnahrung.valueAsNumber * 1500 + bspholz.valueAsNumber * 4500 + bspsilber.valueAsNumber * 7500; summe = summe.toFixed(0); document.getElementById('betrag1').value = summe; } document.getElementById("myForm1").addEventListener("input", rechne); });
Noch eine kleine Anmerkung, da ich mir den Code nicht genau angeschaut hatte.
document.getElementById()
ist imho nicht sonderlich schön und kann sicher besser gelöst werden. Sind das input
die alle in #myForm1
stehen?summe +=
input
leer ist und .valueAsNumber()
NaN
zurück gibt?Gruß
Jo
Hallo,
document.getElementById("myForm1").addEventListener("input", rechne);
input feuert bei jedem Input, also bei Eingabe jeder Ziffer. Wenn eine mehrstellige Zahl eigegeben wird, wird bei jeder Ziffer gerechnet. Ich verzögere daher die Reaktion auf das Input-Event:
var to;
document.getElementById("myForm1").addEventListener("input",function(event) {
window.clearTimeout(to);
to = window.setTimeout(rechne,500);
},false);
Gruß
Jürgen
Lieber betking99,
suchst Du so etwas? (Demo)
/**
* 123456789.0123 => 123.456.789,0123
*
* @param int
* @return string
*/
function dottedNumber (i) {
var r = ""; // wird Ergebnis
// s[0] Vorkomma-, s[1] Nachkommastellen
const s = i.toString().split('.');
// String rückwärts wenden
function reverse (str) {
return str.split("").reverse().join("");
}
// wir arbeiten Vorkommastellen von hinten ab
s[0] = reverse(s[0]);
while (s[0].length) {
// Dreiergruppe möglich?
if (s[0].length > 2) {
// an r anhängen und mit . trennen
r += s[0].substr(0, 3) + ".";
s[0] = s[0].substr(3);
} else {
// Rest anhängen und Ende
r += s[0];
s[0] = "";
}
}
// letzten Trenner entfernen und wieder umkehren
r = reverse(
r.replace(/\.$/, "") // \. für echten Punkt
);
// gab es noch Nachkommastellen?
if (s[1].length) {
r += "," + s[1];
}
return r;
}
In der Demo habe ich die Vorschläge von hier mit eingearbeitet, inklusive einer Prüfung auf Nichtzahlenwerte.
Liebe Grüße
Felix Riesterer
Hallo,
(Demo)
Bug? Ich habe zufällige Werte eingegeben und bekomme natürlich ein krummes Ergebnis. Sodann versuche ich mit den Pfeiltasten einen Integerwert als Ergebnis zu bekommen. Das gelingt nicht, da wird offenbar die Ansicht nicht aktualisiert.
Beispiel:
Nahrung: 257001
Holz: 469000
Silber: 50
BspNahrung: 5680
BspHolz: 140
BspSilber: 6
9.204.057,001
klicke ich bei Nahrung 1 runter, ändert sich nix. Erst beim 2. Klick kommt
...6,999
Gruß
Kalk
Lieber Tabellenkalk,
Bug? [...] da wird offenbar die Ansicht nicht aktualisiert.
offensichtlich. Aber mir ist das herzlich egal, weil es in erster Linie um die Zusammenstellung der Zahl geht, und in zweiter, wie man fehlerhafte Eingaben in JavaScript abfängt.
Liebe Grüße
Felix Riesterer
@@Felix Riesterer
suchst Du so etwas? (Demo)
Nein. Die richtige Lösung war lange genannt.
Ich sehe keinen Grund, die native JavaScript-Methode nicht zu verwenden und stattdessen das mit was Eigenem nachzubasteln.
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
Hallo Gunnar,
Nein. Die richtige Lösung war lange genannt.
Ich sehe keinen Grund, die native JavaScript-Methode nicht zu verwenden und stattdessen das mit was Eigenem nachzubasteln.
leider verwendet .toLocalString()
als Tausendertrennzeichen den Punkt (de) und nicht, wie die Normen vorsehen, ein schmales geschütztes Leerzeichen. Auch führen Tausendertrenner dazu, dass die Zahlen nicht mehr per C&P übernommen werden können.
Gruß
Jürgen
Hi there,
Ich sehe keinen Grund, die native JavaScript-Methode nicht zu verwenden und stattdessen das mit was Eigenem nachzubasteln.
leider verwendet
.toLocalString()
als Tausendertrennzeichen den Punkt (de) und nicht, wie die Normen vorsehen, ein schmales geschütztes Leerzeichen. Auch führen Tausendertrenner dazu, dass die Zahlen nicht mehr per C&P übernommen werden können.
Naja, ersteres kann man leicht dadurch ändern, indem man dem .toLocalString() ein .replace(/./g,'was_weiss_ich_wie_man_ein_geschütztes_leerzeichen_darstellt') nachstellt und zweites Problem hast Du immer, egal wie oder womit oder wie aufwendig Du den Ausgabestring erzeugst. Ich meine, wenn ich mir das Beispiel von Felix anschaue, krieg' ich Augenkrebs, und vor allem, für nix...
@@klawischnigg
'was_weiss_ich_wie_man_ein_geschütztes_leerzeichen_darstellt'
'\u{00A0}'
, würd ich denken.
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
Hi there,
'was_weiss_ich_wie_man_ein_geschütztes_leerzeichen_darstellt'
'\u{00A0}'
, würd ich denken.
Also, dank Gunnar heisst jetzt die gesuchte Lösung jetzt zahl.toLocaleString('de-DE').replace(/\./g,'\u{00A0}')
...😉
@@klawischnigg
Also, dank Gunnar heisst jetzt die gesuchte Lösung jetzt
zahl.toLocaleString('de-DE').replace(/\./g,'\u{00A0}')
...😉
Ah, waitaminute. Statt U+00A0 würd ich da eher ein U+202F narrow no-break space setzen. (Auch wenn das in manchen Schriftarten keinen visuellen Unterschied macht.)
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
Hi there,
Also, dank Gunnar heisst jetzt die gesuchte Lösung jetzt
zahl.toLocaleString('de-DE').replace(/\./g,'\u{00A0}')
...😉Ah, waitaminute. Statt U+00A0 würd ich da eher ein U+202F narrow no-break space setzen. (Auch wenn das in manchen Schriftarten keinen visuellen Unterschied macht.)
Ja, die schlaue Wikidingsda sagt dazu: schmales Leerzeichen U+2009 (thinsp), Geschütztes Leerzeichen U+202F...
Hallo,
Auch führen Tausendertrenner dazu, dass die Zahlen nicht mehr per C&P übernommen werden können.
und zweites Problem hast Du immer, egal wie oder womit oder wie aufwendig Du den Ausgabestring erzeugst.
deswegen bin ich immer wieder der Meinung, dass diese Formatierung der Ausgabe die Sache von CSS sein müsste, so dass der tatsächlich übertragene Wert locale-agnostic ist. Dann wäre er auch problemlos mit C&P übertragbar.
Ich meine, wenn ich mir das Beispiel von Felix anschaue, krieg' ich Augenkrebs, und vor allem, für nix...
Warum konkret? - Mich stört da eigentlich nur das Komma als Dezimaltrennzeichen, wo ich eigentlich einen Punkt erwarte.
Live long and pros healthy,
Martin
Hi there,
deswegen bin ich immer wieder der Meinung, dass diese Formatierung der Ausgabe die Sache von CSS sein müsste, so dass der tatsächlich übertragene Wert locale-agnostic ist. Dann wäre er auch problemlos mit C&P übertragbar.
korrekt.
Ich meine, wenn ich mir das Beispiel von Felix anschaue, krieg' ich Augenkrebs, und vor allem, für nix...
Warum konkret? - Mich stört da eigentlich nur das Komma als Dezimaltrennzeichen, wo ich eigentlich einen Punkt erwarte.
Ich meinte damit nur den Aufwand, der betrieben wird, um eine bereits implementierte Funktion nachzubauen...
@@JürgenB
leider verwendet
.toLocalString()
als Tausendertrennzeichen den Punkt (de) und nicht, wie die Normen vorsehen, ein schmales geschütztes Leerzeichen.
Number.toLocaleString() erlaubt die Angabe von Optionen. Unten wird auf [ECMA-402] verwiesen. Ich hab aber nichts Genaueres finden können, was da so alles möglich ist. Vielleicht kann man ja auch das als Tausendertrennzeichen zu verwendende Zeichen angeben.
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
Hi there,
leider verwendet
.toLocalString()
als Tausendertrennzeichen den Punkt (de) und nicht, wie die Normen vorsehen, ein schmales geschütztes Leerzeichen.Number.toLocaleString() erlaubt die Angabe von Optionen. Unten wird auf [ECMA-402] verwiesen. Ich hab aber nichts Genaueres finden können, was da so alles möglich ist. Vielleicht kann man ja auch das als Tausendertrennzeichen zu verwendende Zeichen angeben.
Laut MDN web docs gibts in der Tat jede Menge Optionen aber interessanterweise nichts, womit man einfach das Tausendertrennzeichen einstellen kann. Vermutlich, weil es dann mit "to Locale" nichts mehr zu tun hätte😉...
Hallo Gunnar,
ich habe auch nichts dazu gefunden, wie man den Separator ändern kann. Bei Stackoverflow wird auch replace vorgeschlagen.
Gruß
Jürgen
Hallo Gunnar,
ich würde es für falsch halten, wenn man in toLocaleString das Gruppierungszeichen selbst einstellen könnte. Das muss aus dem Locale kommen, sonst ist es nicht international.
Die von einem bestimmten Locale produzierten Formatierungen mit .replace zu „korrigieren“ ist auch riskant. Selbst wenn ich .toLocaleString("de-DE") verwende, weiß ich trotzdem nicht, ob dieses Locale auf dem Zielcomputer installiert ist. Da müsste man zuvor etwas herumsniffen, z.B. (123456.789).toLocaleString("de-DE", {useGrouping:true,style:"decimal"}
) aufrufen und testen was der liefert. Oder kann das Vorhandensein von Locale-Definitionen abfragen? Oder heutzutage gar voraussetzen?
Eine CSS Lösung würde wohl das gleiche Problem haben wie toLocaleString. Hinzu käme, dass man dort nicht mal die Chance hätte, mit .replace etwas zu „verbessern“.
Rolf
Hallo Rolf,
ich würde es für falsch halten, wenn man in toLocaleString das Gruppierungszeichen selbst einstellen könnte. Das muss aus dem Locale kommen, sonst ist es nicht international.
aber entweder die Funktion hält sich an die Regeln, oder, wenn die Regeln nicht hart oder nicht akzeptiert sind, lässt Einstellungen zu.
Gruß
Jürgen
Hi there,
Hallo Gunnar,
ich würde es für falsch halten, wenn man in toLocaleString das Gruppierungszeichen selbst einstellen könnte. Das muss aus dem Locale kommen, sonst ist es nicht international.
ich bin zwar nicht der Gunnar aber…
Die von einem bestimmten Locale produzierten Formatierungen mit .replace zu „korrigieren“ ist auch riskant. Selbst wenn ich .toLocaleString("de-DE") verwende, weiß ich trotzdem nicht, ob dieses Locale auf dem Zielcomputer installiert ist.
jo mei, ist man versucht zu sagen. Oder um es anders zu formulieren, das "Risiko" kann man getrost eingehen. Ich vermag mir selbst unter der Einnahme horrortrip-induzierender luzider Substanzen kein Szenario vorzustellen, wie jemand dadurch zu Schaden kommen könnte...
Da müsste man zuvor etwas herumsniffen[...]
ja, da müsste man wahrscheinlich sehr viel herumsniffen...
@@klawischnigg
Die von einem bestimmten Locale produzierten Formatierungen mit .replace zu „korrigieren“ ist auch riskant. Selbst wenn ich .toLocaleString("de-DE") verwende, weiß ich trotzdem nicht, ob dieses Locale auf dem Zielcomputer installiert ist.
jo mei, ist man versucht zu sagen. Oder um es anders zu formulieren, das "Risiko" kann man getrost eingehen.
Hm, wenn 9876.50
nicht in 9.876,50
umgeformt wird und man .
durch
(U+202F) ersetzt, kommt 9876 50
raus. Das will man gewiss nicht.
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
@@Gunnar Bittersmann
kommt
9876 50
raus.
Oops, auf dem macBook wird 9876 50
wie 9876 50
gerendert; auf dem iPhone wie 987650
.
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
Die von einem bestimmten Locale produzierten Formatierungen mit .replace zu „korrigieren“ ist auch riskant. Selbst wenn ich .toLocaleString("de-DE") verwende, weiß ich trotzdem nicht, ob dieses Locale auf dem Zielcomputer installiert ist. Da müsste man zuvor etwas herumsniffen, z.B.
(123456.789).toLocaleString("de-DE", {useGrouping:true,style:"decimal"}
) aufrufen und testen was der liefert. Oder kann das Vorhandensein von Locale-Definitionen abfragen?
Man kann es mit Intl.NumberFormat.supportedLocalesOf() abfragen.
Hallo 1unitedpower,
vor 10min auch gesehen :)
Aber danke dass Du es geschrieben hast.
Rolf
@@betking99
document.addEventListener('DOMContentLoaded', function () { function rechne() { var bnahrung = document.getElementById('bnahrung'), bholz = document.getElementById('bholz'), bsilber = document.getElementById('bsilber'); bspnahrung = document.getElementById('bspnahrung'); bspholz = document.getElementById('bspholz'); bsilber = document.getElementById('bsilber'); var summe = bnahrung.valueAsNumber / 1000 + bholz.valueAsNumber * 3 / 160 + bsilber.valueAsNumber * 5 / 40 + bspnahrung.valueAsNumber * 1500 + bspholz.valueAsNumber * 4500 + bspsilber.valueAsNumber * 7500; summe = summe.toFixed(0); document.getElementById('betrag1').value = summe; } document.getElementById("myForm1").addEventListener("input", rechne); });
Die Elemente im DOM ändern sich doch nicht, oder? Es macht also keinen Sinn, die Elemente bei jedem Aufruf der Eventhandlerfunktion rechne()
immer und immer wieder mit document.getElementById()
herauszusuchen. Das müsste einmalig geschehen, also außerhalb von rechne()
.
Globale Variablen sind auch keine gute Idee. (bnahrung
, bholz
, bsilber
sind bei dir lokal – so wie’s sein soll –; bspnahrung
, bspholz
, bsilber
sind ohne Schlüsselwort var
global.)
Mittlerweile gibt es die Schlüsselwörter let
und const
, die bevorzugt anstelle von var
zu verwenden sind.
BTW, mit summe = summe.toFixed(0);
halte ich für schlechten Programmnierstil. Du weist du der Variablen summe
einen neuen Wert zu, und zwar von einem völlig anderen Typ (String) als dem, den sie vorher hatte (Number). Sowas würde ich vermeiden.
macht es keinen Sinn, die Elemente im gesamten DOM zu suchen. Du rufst sowieso document.getElementById("myForm1")
auf; das kann man sich in einer Variablen merken und die anderen Elemente müssen nur darin gesucht werden:
const myForm1 = document.getElementById('myForm1');
const bnahrung = myForm1.getElementById('bnahrung');
const bholz = myForm1.getElementById('bholz');
macht es keinen Sinn, die Elemente überhaupt zu suchen. Wenn das form
-Element und die darin enthaltenen Eingabe-Elemente name
-Attribute tragen (was sie tun sollten), dann liegen bereits Referenzen zu diesen vor:
<form name="myForm1">
<label for="bnahrung">Nahrung:</label>
<input name="bnahrung" id="bnahrung"/>
⋮
</form>
Das form
-Element ist per document.forms['myForm1']
verfügbar; ohne dass man nochmal danach suchen müsste.
Eingabe-Elemente per document.forms['myForm1'].elements['bnahrung']
usw.
Beachte, dass das Eingabe-Element name
- und id
-Attribute hat. Die Zuordnung der Beschriftung (for
-Attribut des label
-Elements`) bezieht sich auf die ID.
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
Hallo Gunnar,
Die Elemente im DOM ändern sich doch nicht, oder?
Richtig, und es ist sinnvoll, die DOM Referenzen in Variablen zu puffern. Du weist darüber hinaus darauf hin, dass globale Variablen nichts taugen, lässt betking aber mit der Umsetzung allein.
Ich ergänze darum einen Link auf's Wiki und empfehle Kapitel 3
Und viertens würde ich annehmen, dass die sechste der folgenden Zeilen falsch ist.
var bnahrung = document.getElementById('bnahrung'),
bholz = document.getElementById('bholz'),
bsilber = document.getElementById('bsilber');
bspnahrung = document.getElementById('bspnahrung');
bspholz = document.getElementById('bspholz');
bsilber = document.getElementById('bsilber');
Die Systematik ist inkonsistent. Die ersten 3: b+Ressource. Die nächsten 3: bsp+Ressource, außer beim Silber.
Rolf
Hey,
BTW, mit
summe = summe.toFixed(0);
halte ich für schlechten Programmnierstil. Du weist du der Variablensumme
einen neuen Wert zu, und zwar von einem völlig anderen Typ (String) als dem, den sie vorher hatte (Number). Sowas würde ich vermeiden.
Macht das .toLocalString()
nicht auch?
Gruß
Jo
Hallo,
BTW, mit
summe = summe.toFixed(0);
halte ich für schlechten Programmnierstil. Du weist du der Variablensumme
einen neuen Wert zu, und zwar von einem völlig anderen Typ (String) als dem, den sie vorher hatte (Number). Sowas würde ich vermeiden.Macht das
.toLocalString()
nicht auch?
nein, nicht per se, und .toFixed() auch nicht. Es geht vor allem um die erneute Zuweisung eines anderen Typs an dieselbe Variable. Dass eine Funktion oder Methode als Ergebnis einen anderen Typ liefert als den ihres Arguments, ist dagegen völlig normal.
Übrigens: Die hier diskutierte Methode heißt toLocaleString.
Live long and pros healthy,
Martin