JavaScript "NaN" bei Javascript unterdrücken...

[mischaef]

Nabend zusammen,

ich habe hier ein Formular, bei dem aus einem Preis und der Menge direkt in einem weiteren Input-Feld der Gesamtpreis berechnet wird. Das Problem ist nur, dass bis das zweite Feld eingegeben ist, im Ausgabefeld immer nur das berühmte "NaN" angegeben wird. Kann man das irgendwie unterdrücken?

Ich hab im Netz ein wenig gesucht, aber was was ich gefunden habe und umsetzen konnte funktioniert irgendwie nicht...das ist der aktuelle Stand:

<script>
    function berechneGesamtpreis(i) {
        var menge = parseFloat(document.getElementById('menge_' + i).value.replace(',', '.'));
        var preis = parseFloat(document.getElementById('preis_' + i).value.replace(',', '.'));
        var gesamtpreis = (menge * preis).toFixed(2).replace('.', ',');

        if (!isNaN(gesamtpreis)) {
            document.getElementById('gesamtpreis_' + i).value = gesamtpreis;
        } else {
            document.getElementById('gesamtpreis_' + i).value = '';
        }
    }
</script>

Wie gesagt, mit NaN funzt das Ganze bestens...nur sieht das irgendwie ...doof aus...^^

Hätte jemand eine Idee, was ich machen kann? Oder ist das überhaupt möglich?

Besten dank schon mal

 

[floq0r]

Wie gesagt, mit NaN funzt das Ganze bestens...nur sieht das irgendwie ...doof aus...^^

Was meinst du damit? Funktioniert der Code oder nicht?

 

[Amaoto]

Kann man das irgendwie unterdrücken?

Die Berechnung einfach erst dann ausführen, wenn alle Werte eingegeben sind?

 

[mischaef]

Der Code ohne die "If"-Anweisung ja...nur wenn ich versuche das im Input-Feld angezeigte NaN auszublenden, wird der berechnete Gesamtpreis nicht mehr ausgegeben.

@Amaoto
Und wie mache ich das? Ich hab mit JS bisher nichts zu tun gehabt, bin froh dass ich die Funktion oben "zusammengeklöppelt" bekommen habe...^^

 

[floq0r]

Dann debugge dir mal "gesamtpreis" vor der Ausgabe. Ist es NaN?

 

[cx01]

Du wendest das isNaN() auf einen String an ("gesamtpreis" Variable), daher ist es niemals true. Nimm einfach das ".toFixed(2).replace('.', ',');" am Ende von Zeile 5 weg und pack es in Zeile 8

 

[mischaef]

@floq0r
OK, ich hoffe dass das, was ich auf die Schnelle dazu gefunden habe, so richtig war:

console.log('Gesamtpreis_Konsole:', gesamtpreis);

habe ich vor der Ausgabe eingefügt...

In der Konsole von FF steht dann bei Eintrag der ersten Zahl: Gesamtpreis_Konsole: NaN

@cx01

So?

function berechneGesamtpreis(i) {
    var menge = document.getElementById('menge_' + i).value.replace(',', '.');
    var preis = document.getElementById('preis_' + i).value.replace(',', '.');

    var total = parseFloat(menge) * parseFloat(preis);

    if (!isNaN(total)) {
        document.getElementById('gesamtpreis_' + i).value = total.toFixed(2).replace('.', ',');
    } else {
        document.getElementById('gesamtpreis_' + i).value = '';
    }
}
</script>

Dann wird in dem 3. Input-Feld nichts ausgegeben...

NACHTRAG:

Doch, es funktioniert, kleiner Eingabefehler von mir....^^

Besten dank für die schnelle Hilfe!

 

[floq0r]

Ok, wie @cx01 richtig angemerkt hat wird aber isNaN("12,34") aber auch zu true, eben weil du den Punkt durch ein Komma ersetzt und JS den Wert nicht mehr als Number erkennt.

var gesamtpreis = menge * preis;
var gesamtpreis_string = '';

        if (!isNaN(gesamtpreis)) {
           gesamtpreis_string = gesamtpreis.toFixed(2).replace('.', ',');
        }
document.getElementById('gesamtpreis_' + i).value = gesamtpreis_string;

edit: war zu langsam am Handy

 

[netzgestaltung]

Bei preisen würd ich eher um eine währungsausgabe schauen, zb so wie hier https://www.freecodecamp.org/news/how-to-format-number-as-currency-in-javascript-one-line-of-code/ - dann kann das per ISO richtig ausgedrückt werden statt dem replace.

 

[sandreas]

berechneGesamtpreis

Hier haben wir mal wieder den Klassiker... Preise mit dem Datentyp "Number" bzw. floats auszurechnen ist bei einem kleinen Testscript noch vertretbar, bei einem ernsthaften Programm aber bestenfalls fahrlässig und schlimmstenfalls entstehen (Rundungs-)Fehler, die sich fortsetzen und auf die Programmlogik fehlerhaft auswirken.

Strings durch das ersetzen von , in Number umzuwandeln ist auch keine gute Strategie.

Versuch mal

console.log(0.2 + 0.7);

Tipp: Es kommt nicht 0.9 raus.

Du kannst eine decimal-Bibliothek raussuchen oder, sofern du nichts ausrechnen musst, die Intl-Variante von @netzgestaltung anschauen. Wichtig: Die Dezimal-Bibliothek zu verwenden verursacht einige Schmerzen beim Programmieren und ist etwas langsamer, aber sonst funktioniert das recht zuverlässig.