JavaScript Counter gibt NaN aus (Zahlen mit Komma)

[Kazel]

Guten Abend allerseits,

ich habe ein kleines Problem. Und zwar hätte ich gerne, dass meine Zahl im span (siehe unten) als Counter ausgegeben/animiert wird, was soweit kein Problem ist, jedoch sobald ich eine Zahl mit einem Komma nutze (25,40 z.B.), gibt er mir die Meldung NaN (Not a Number) aus. Ich habe einige Möglichkeiten gefunden, automatisch ein Komma zu setzen, aber das ist nicht mein Ziel.

Meine Javascript/jQuery Kenntnisse reichen gerade mal für die Basics, hättet ihr eine Idee, wie ich dieses Problem lösen könnte?
Also mein Ziel ist es, dass wenn sagen wir jemand in den <span> die Nummer 25,40 eingibt, diese vom Counter auch so dargestellt wird.

Hier das Beispiel:
https://jsfiddle.net/gtq3resh/

<span class="counter-number">100</span>
<span class="counter-number">1500</span>
<span class="counter-number">12</span>
<span class="counter-number">25,40</span>

    $('.counter-number').each(function () {
        var size = $(this).text().split(".")[1] ? $(this).text().split(".")[1].length : 0;
        $(this).prop('Counter', 0).animate({
            Counter: $(this).text()
        }, {
            duration: 800,
            step: function (func) {
                $(this).text(parseFloat(func).toFixed(size));
            }
        });
    });

Vielen Dank für eure Hilfe!

 

[Raijin]

Punkt statt Komma.

 

[korbenm]

Ach ja NaN.
Das erinnert mich immer hieran: https://www.destroyallsoftware.com/talks/wat

 

[madmax2010]

@korbenm danke. Den suche ich seit wochen

 

[Kazel]

Punkt statt Komma.

Ich würde aber gerne wenn möglich eben ein Komma nutzen, es macht einen Unterschied ob ich 1.500 schreibe oder 1,500.

Ach ja NaN.
Das erinnert mich immer hieran: https://www.destroyallsoftware.com/talks/wat

Uff.

 

[Keylan]

Ich würde aber gerne wenn möglich eben ein Komma nutzen, es macht einen Unterschied ob ich 1.500 schreibe oder 1,500.

Willkommen in der Welt der Programmierung, wo sich die Masse daran gewöhnt ist wenn wir internationale Standards nutzen auch wenn das bedeutet, dass 80% davon aus den USA kommen.

1,500 ist äquivalent zu 1500 und 1.500 eben zu 1.5. Komma als Dezimalseparator ist eben eine dieser deutschen Besonderheiten. Frag mal die Schweitzer was die für Späße machen.

 

[Kazel]

Willkommen in der Welt der Programmierung, wo sich die Masse daran gewöhnt ist wenn wir internationale Standards nutzen auch wenn das bedeutet, dass 80% davon aus den USA kommen.

1,500 ist äquivalent zu 1500 und 1.500 eben zu 1.5. Komma als Dezimalseparator ist eben eine dieser deutschen Besonderheiten. Frag mal die Schweitzer was die für Späße machen.

Ist mir bewusst, dennoch dachte ich, hätte hier jemand evtl. einen Lösungsansatz. Denn möglich ist es sicherlich, die Frage ist nur wie man dahin kommt. Aber ich seh' schon, dass es nicht unbedingt die beste Idee war, das hier zu fragen.

 

[madmax2010]

s macht einen Unterschied ob ich 1.500 schreibe oder 1,500.

warum macht das einen unterhschied fuer dich? In JS haelt man sich halt an die Englsiche art zahlen zu schreuben.
Aber warum ist das fuer dich Relevant? Bekommen user doch nichts von mit

 

[Kazel]

warum macht das einen unterhschied fuer dich? In JS haelt man sich halt an die Englsiche art zahlen zu schreuben.
Aber warum ist das fuer dich Relevant? Bekommen user doch nichts von mit

Möchte man in Europa z.B. einen Preis mit Komma darstellen, dann macht es einen Unterschied ob ich 2,55 oder 2.55 schreibe. Ich mache nicht die Regeln, wollte nur wissen, ob man mir hierbei aushelfen kann

 

[madmax2010]

Das interne handliung von zahlen hat nichts mit der ausgabe zu tun. In der Ausgabe kannst du es darstellen wie du willst. Suche gerade mal wie das in JS geht. Die haben da sicher etwas zur Beeinflussung des Ausgbeformats.

 

[AndrewPoison]

Neben all den unnützen Beiträgen, die sicher gut gemeint sind... gibts natürlich ne Lösung:

    $('.counter-number').each(function () {
            var tmp = $(this).text().replace(",",".");
        var size = tmp.split(".")[1] ? tmp.split(".")[1].length : 0;
        $(this).prop('Counter', 0).animate({
            Counter: tmp
        }, {
            duration: 800,
            step: function (func) {
                $(this).text(parseFloat(func).toFixed(size));
            }
        });
    });

...wir ersetzen einfach das Komma mit einem Punkt. Und nutzen den Wert dann an den relevanten Stellen. Das ließe sich dann auch noch für die Ausgabe übernehmen, falls nötig (in der Step-Callback-Function würde man dann nach .toFixed(size) ggf noch mal ein .replace(".",",") anhängen oder eben gleich tmp nutzen oder oder oder... je nach gusto)

 

[Kazel]

Das interne handliung von zahlen hat nichts mit der ausgabe zu tun. In der Ausgabe kannst du es darstellen wie du willst.

Und hättest du eine Idee, wie man die Darstellung eben beeinflussen kann, sodass ich z.B. oben in meinem <span> bei 25,50 diese Zahl auch so bekomme, ohne dass mein jQuery mir ein NaN ausspuckt

 

[madmax2010]

Nicht mehr noetig. @AndrewPoison hat schjon eine sehr elegante DIY Loesung.

var tmp = $(this).text().replace(",",".");

das ist der relevante teil. string bauen -> zeichen ersetzen

Kannst aber auch mal schauen wie es mit 'toLocaleString' aussieht.
Irgendwas muss JS zur regionalisierten Stringausgabe fertig haben.

 

[Kazel]

Neben all den unnützen Beiträgen, die sicher gut gemeint sind... gibts natürlich ne Lösung:

    $('.counter-number').each(function () {
            var tmp = $(this).text().replace(",",".");
        var size = tmp.split(".")[1] ? tmp.split(".")[1].length : 0;
        $(this).prop('Counter', 0).animate({
            Counter: tmp
        }, {
            duration: 800,
            step: function (func) {
                $(this).text(parseFloat(func).toFixed(size));
            }
        });
    });

...wir ersetzen einfach das Komma mit einem Punkt. Und nutzen den Wert dann an den relevanten Stellen. Das ließe sich dann auch noch für die Ausgabe übernehmen, falls nötig (in der Step-Callback-Function)

Danke, dass du auf das Getrolle und das Offensichtliche verzichtest. Ich war schon am Überlegen, den Thread hier zu schließen.

Jedenfalls jap, das funktioniert recht gut, aber soweit war ich ebenfalls. Da wird eben ein Punk statt Komma dargestellt. Eine Idee, wie es aussehen könnte den Punkt durch ein Komma zu ersetzen, aber quasi es beizubehalten wenn es auch im <span> angegeben ist? Sprich span mit Komma soll Komma Zahl darstellen und Punkt eben mit Punkt

 

[korbenm]

Du müsstest bei sowas eigentlich eine wählbare Kultur (nicht Sprache: siehe Unterschied Österreich-Deutschland) in der Oberfläche einführen und über diese bestimmen wie Zahlen/Datum/... dargestellt und evtl. ausgelesen werden.

z.b. mit der Methode von madmax2010

 

[AndrewPoison]

Notfalls, falls du dir das ganze Ge-Locale sparen willst, weil es tatsächlich nur um diese eine verdammte Ausgabe geht (^^), kannst du ja mittels einer If-Abfrage vorher prüfen, ob in dem Text ein Komma/Punkt vorkommt und abhängig davon in der Ausgabe dann die Zeichen ersetzen oder eben nicht.

die .indexOf-Funktion wäre dann dein Freund.