Romero: Input type="text"-Feld mit mathematischen Operatoren

Hallöchen ihr's,

meine Frage betrifft, wie der Titel schon sagt, ein Input type="text"-Feld mit mathematischen Operatoren. Wie kann ich das Input-Feld so gestalten, dass er mehrere Zahlen-Werte, getrennt durch "+", "-", ... zusammen addiert, subtrahiert, etc.?

Der Hintergrund ist der, dass ich generell erst einmal prüfe, ob der Wert eine Zahl ist (isNaN(Wert)). Soweit so gut. Dennoch möcht ich dem Nutzer die Möglichkeit geben, Zahlen addieren, etc. zu lassen. Muss ich da z.B. dem Nutzer "befehligen", ein "=" voransetzen zu lassen und dann den Value-String nach den mathematischen Operatoren aufzusplitten und dann, anhand der Operatoren, wieder zusammen zu setzen oder gibt es da eine "einfacherer" Lösung für das Rechnen generell?

LG Romero

  1. Hallo,

    such mal nach parseInt oder parseFloat.

    Gruß
    Jürgen

    1. Hy JürgenB,

      das habe ich mir auch schon durchdacht, aber ich kann den Value-String nicht zusammen rechnen. Auch wenn ich den gesamten String parse, so bleibt er bei der ersten Zahl "hängen".

      Beispiel: Value = "300+200" parseInt(Value) = "300"

      Ich bin schon drauf und dran, mittels .split(/[+-*/]/) und .split(/\d/) die einzelnen Werte zusammen zu ketten und zu rechnen, was aber mir eher zu umständlich erscheint.

      Das "Umrechnen" der Teil-Strings in Zahlen ist mir mittels parseInt() bewusst. Aber wie kann ich den String gleich nehmen, die Werte mittels mit den im String enthaltenden mathematischen Operatoren rechnen und ausgeben? Splitten und Operatoren separieren?

      LG Romero

      1. Hallo Romero,

        jetzt verstehe ich, was du meinst. Versuch mal eval.

        Gruß
        Jürgen

        1. Hallo JürgenB,

          ja, genau das war es. Herzlichen Dank. So einfach kann manchmal wie Welt sein. Dankeschön :)

          LG Romero

  2. Tach!

    meine Frage betrifft, wie der Titel schon sagt, ein Input type="text"-Feld mit mathematischen Operatoren. Wie kann ich das Input-Feld so gestalten, dass er mehrere Zahlen-Werte, getrennt durch "+", "-", ... zusammen addiert, subtrahiert, etc.?

    Wer ist "er"?

    Es ist ein Input-Feld vom Typ text und nicht formel-die-ich-dir-gleich-ausrechne. Da gibt es nichts weiter für deinen Anwendungsfall zu gestalten.

    Der Hintergrund ist der, dass ich generell erst einmal prüfe, ob der Wert eine Zahl ist (isNaN(Wert)). Soweit so gut. Dennoch möcht ich dem Nutzer die Möglichkeit geben, Zahlen addieren, etc. zu lassen.

    Solange es gültige Javascript-Syntax ist, kannst du eval() verwenden. WAS? eval()? eval() ist doch des Teufels!!1elf! - Wenn der Anwender sich selbst ins Knie schießen möchte, braucht er das eval() nicht. Das kann er auch an der Browserkonsole tun. eval() öffnet hier keine Missbrauchsmöglichkeit, die nicht schon im Browser eingebaut wäre. Es sei denn, die Anwendung soll im Kiosk-Modus laufen.

    try-catch drumherum fängt Eingabefehler ab.

    Muss ich da z.B. dem Nutzer "befehligen", ein "=" voransetzen zu lassen und dann den Value-String nach den mathematischen Operatoren aufzusplitten und dann, anhand der Operatoren, wieder zusammen zu setzen oder gibt es da eine "einfacherer" Lösung für das Rechnen generell?

    Wenn du unbedingt einen Formelparser schreiben möchtest, dann tu das. Das ist aber aufwendiger als ein lediglich paar Splits auszuführen. Einfacher ist es, den eingebauten Parser von Javascript zu benutzen.

    dedlfix.

    1. Hy dedlfix,

      Wie kann ich das Input-Feld so gestalten, dass er mehrere Zahlen-Werte, getrennt durch "+", "-", ... zusammen addiert, subtrahiert, etc.?

      Wer ist "er"?

      "er" ist, wie vorher erwähnt, dass Input-Feld. Wollte es nicht doppelt schreiben. Und hab das Feld einfach mal "männlich" gemacht. Bedaure :(

      Solange es gültige Javascript-Syntax ist, kannst du eval() verwenden. WAS? eval()? eval() ist doch des Teufels!!1elf! - Wenn der Anwender sich selbst ins Knie schießen möchte, braucht er das eval() nicht. Das kann er auch an der Browserkonsole tun. eval() öffnet hier keine Missbrauchsmöglichkeit, die nicht schon im Browser eingebaut wäre. Es sei denn, die Anwendung soll im Kiosk-Modus laufen.

      try-catch drumherum fängt Eingabefehler ab.

      Warum soll ich deiner Meinung nach ein try-catch herum basteln, wenn isNaN(eval(Value)) eh prüft, ob das Ergebnis eine Zahl ist oder nicht? Oder wie meinst du es, wie diese try-catch-Variante aussehen könnte, um Eingabefehler zu vermeiden?

      ich habe das Input-Feld mit einem onblur() versehen, wo "er" danach das Ergebnis ausspuckt oder wenn es keine Zahl ist, das Feld farbig markiert. Diverse Fehlereingaben werde ich mittels onkeyup() versuchen, zu unterbinden.

      LG Romero

      1. Tach!

        Wie kann ich das Input-Feld so gestalten, dass er mehrere Zahlen-Werte, getrennt durch "+", "-", ... zusammen addiert, subtrahiert, etc.?

        Wer ist "er"? "er" ist, wie vorher erwähnt, dass Input-Feld. Wollte es nicht doppelt schreiben. Und hab das Feld einfach mal "männlich" gemacht. Bedaure :(

        Ein Input-Feld soll rechnen können? Der "er" muss doch jemand anderes sein.

        Es ist keine allzugroße Seltenheit, dass Fragen gestellt werden, wie "er" irgendwas machen könnte. Meist passiert das weil der Fragesteller sich nicht ausreichend Gedanken gemacht hat, wie das ganze System abläuft. Welche Teile müssen welche Verarbeitungsschritte in welcher Reihenfolge durchführen, dass das gewünschte Ergebnis zustandekommt. Das ist aber essenziell, wenn man zum Ziel kommen möchte. Die Rückfrage soll eigentlich anregen, doch mal genauer drüber nachzudenken.

        try-catch drumherum fängt Eingabefehler ab.

        Warum soll ich deiner Meinung nach ein try-catch herum basteln, wenn isNaN(eval(Value)) eh prüft, ob das Ergebnis eine Zahl ist oder nicht? Oder wie meinst du es, wie diese try-catch-Variante aussehen könnte, um Eingabefehler zu vermeiden?

        Vermeiden kann man sie nicht. eval() erzeugt eine Fehlermeldung, wenn in Value keine gültige Syntax steht. Die Verarbeitung kommt dann gar nicht mehr bei isNaN() vorbei, weil sie aufgrund des Fehlers schon abgebrochen wurde. Das try-catch sorgt dafür, dass dieser Fehler abgefangen wird und die Verarbeitung geht im catch-Block weiter. Du hättest sonst keine Chance, dem Anwender eine Reaktion zu geben. Solch ein Abbruch wird nur in der Browser-Konsole gezeigt, und der Anwender sieht nichts weiter, außer dass nichts passiert.

        Das ist übrigens auch ein Punkt, der gern beim Programmieren vernachlässigt wird. Man sollte sich nicht nur auf die Erreichung des Ziels konzentrieren, sondern auch überlegen, was bei Fehleingaben stattfinden soll, und das auch ausgiebig testen.

        dedlfix.

        1. Wenn Du eval() verwendest, dann bedenke, dass der User auch schräge Dinge eingeben kann, die Dinge auslösen, die Du nicht willst. Du solltest als Mindestprüfung eine Regex drüberlaufen lassen, die nur Ziffern, das Dezimalkomma, die mathematischen Operatoren und Klammern akzeptiert. Sonst scriptet Dir da nachher jemand was 'rein. Kann sein, dass es bei Dir unkritisch ist, aber zumindest solltest Du kurz drüber nachgedacht haben und zum Ergebnis gekommen sein, ob eine Script-Injektion bei Dir Schaden anrichten kann oder nicht. Bei der Antwortsuche solltest Du von "Ja, kann" ausgehen und nur nach reiflicher Überlegung zu "Nein, kann nicht" übergehen.

          Rolf

          1. Hallo Rolf,

            Wenn Du eval() verwendest, dann bedenke, dass der User auch schräge Dinge eingeben kann, die Dinge auslösen, die Du nicht willst.

            diese „schrägen Dinge“ betreffen aber nur denjenigen, der sie eingegeben hat. Anders wäre es, wenn URL-Parameter ungeprüft „evaluiert“ werden, hier könnte man „böse“ links verschicken. Daher denke ich, dass in diesem Fall auf eine Prüfung verzichtet werden klann.

            Gruß
            Jürgen

          2. Tach!

            Wenn Du eval() verwendest, dann bedenke, dass der User auch schräge Dinge eingeben kann, die Dinge auslösen, die Du nicht willst.

            Ja, wie ich bereits gesagt habe, kann der User genau dieselben Dinge ausführen, die er auch an der Browser-Console eingeben kann, ohne dass ich es verhindern kann, solange nicht der Kiosk-Modus Anwendung findet. Aus sicherheitstechnischen Gründen eine Prüfung vorzunehmen ist also für normalen Browserbetrieb sinnlos. Sinnvoll kann es aber sein, eine fachliche Prüfung vorzunehmen.

            dedlfix.

            1. Wenn das Ergebnis des Nachdenkens lautet: Die Eingabe bleibt im Brauser und gelangt nicht über meinen Server zu anderen Usern - dann ist eure Schlussfolgerung richtig. Sonst nicht.

              1. Tach!

                Wenn das Ergebnis des Nachdenkens lautet: Die Eingabe bleibt im Brauser und gelangt nicht über meinen Server zu anderen Usern - dann ist eure Schlussfolgerung richtig. Sonst nicht.

                Auch wenn die Eingabe zum Server gelangen sollte, kann ich mit einer Prüfung vor dem eval() nicht die Benutzung der Konsole verhindern, oder irgendeine andere Art, ungewünschte Daten zum Server zu senden. Eine Prüfung im Client bringt keine Sicherheit, die ich auf dem Server einsparen könnte.

                dedlfix.