akuep: Javascript Problem mit "select" und "option"

Ich suche seit Tagen nach einem Javascript Problem by einem vermeintlich einfachem Ausführungsscript.

Ein Wert soll aus einer Select /option ausgelesen werden

<div class="diao_input"><select id ="diao_input" name="diao_input" size="1"><option value = "168.3" > 168,3 </option>
      <option value = "219.1" > 219,1 </option>
      <option value = "273" > 273 </option>
 <option value = "711" > 711 </option>
		</select></div>

und in einer Variablen gespeichert werden:

const Diao = parseFloat(document.querySelector("#diao_input").value);

const tol_diameter = parseFloat(219.1);

Mit dieser Variablen soll in dem Script gerechnet werden:

if (Diao <= tol_diameter) {
c1 = (Math.max (0.125 * eord, 0.4)).toFixed(2);
}

if (Diao > tol_diameter && ratio3 =< 0.025) {
c1 = (0.2 * eord).toFixed(2);
}

Alle Werte erforderlichen Werte in den beiden "if"-Anweisungen werden durch eine Prompt-Abfrage korrekt angezeigt.

Jetzt kommt das Problem: Wenn ich nur die 1. if-Anweisungen eingebe, wird die Variable "c1" korrekt angezeigt.

Sobald die die 2. If-Anweisung eingebe, wird die ganze Funktion nicht ausgeführt.

Syntax-Fehler habe ich durch JSFiddle überprüft. Es wird nur eine Meldung angezeigt: "[Line 2] SyntaxError: Unexpected token '<'"

siehe die ersten beiden Zeilen des Scripts:

<script>	 
		function ptcalculation (form1)
    {
		 "use strict";
    const PS = parseFloat(form1.ps_input.value);

Es deutet auch darauf, dass die Funktion nicht ausgeführt wird.

In der Browser-Konsole steht: ReferenceError: Can't find variable: ptcalculation.

Ich hoffe, ich habe das Problem einigermaßen verständlich beschrieben. Kann mir jemand helfen, warum die 2. If-Anweisung dafür verantwortlich ist, dass das Script nicht ausgeführt wird?

Vielen Dank

  1. @@akuep

    Mit dieser Variablen soll in dem Script gerechnet werden:

    if (Diao <= tol_diameter) {
    c1 = (Math.max (0.125 * eord, 0.4)).toFixed(2);
    }
    

    Mit einer globalen Variablen? Oder hast du die vorher mit let c1 deklariert?

    if (Diao > tol_diameter && ratio3 =< 0.025) {
    c1 = (0.2 * eord).toFixed(2);
    }
    

    Es wird nur eine Meldung angezeigt: "[Line 2] SyntaxError: Unexpected token '<'"

    Zeilennummern sind Schall und Rauch (wenn das Script minifiziert wurde).

    Wenn die zweite if-Anweisung das Problem ist, solltest du dort nach dem Syntaxfehler suchen.

    Und fündig werden: Es gibt keinen =<-Operator.

    🖖 Live long and prosper

    --
    “In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
    — Bruce Springsteen, Manchester 2025-05-14
    1. Ich habe für c1 eine let-variable definiert:

      let c1 = "";
      

      Mit dem Vergleichsoperator "≤" hatte ich vorher gearbeitet, funktionierte auch nicht.

      1. @@akuep

        let c1 = "";
        

        Eine Stringvariable zu definieren und sie später mit anderen Typen (Zahlen) zu befüllen, halte ich für keinen guten Programmierstil.

        Definiere sie mit let c1 = 0; oder gar nicht, also deklariere sie bloß: let c1; (Der Wert bleibt dann undefined, bis du einen anderen zuweist.)

        Mit dem Vergleichsoperator "≤" hatte ich vorher gearbeitet, funktionierte auch nicht.

        Wäre ja noch schöner, wenn Programmiersprachen Typografie könnten!

        Fun fact: Der Font, den ich zum Programmieren verwende – Fira Code – hat Ligaturen, u.a. für <= und >=:

        sieht dann aus wie ≤ und ≥

        🖖 Live long and prosper

        --
        “In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
        — Bruce Springsteen, Manchester 2025-05-14
        1. Hallo Gunnar,

          Fira Code – hat Ligaturen

          was einerseits hübsch aussieht, es haben darob aber auch schon Kollegen von mir die Augenbrauen bis zum Haaransatz hochgezogen (und zwar im Nacken!).

          Man tippt ja immer noch <= und >=, und JavaScript bekommt das auch immer noch zu sehen.

          Rolf

          --
          sumpsi - posui - obstruxi
          1. @@Rolf B

            Fira Code – hat Ligaturen

            was einerseits hübsch aussieht, es haben darob aber auch schon Kollegen von mir die Augenbrauen bis zum Haaransatz hochgezogen (und zwar im Nacken!).

            Wäre ja noch schöner, wenn andere einem beim Programmieren zusehen könnten!

            Man tippt ja immer noch <= und >=, und JavaScript bekommt das auch immer noch zu sehen.

            Jedem, wie er’s braucht: Man selbst bekommt eine hübsche Anzeige, und der Compiler/Interpreter/Parser bekommt, was er versteht.

            🖖 Live long and prosper

            --
            “In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
            — Bruce Springsteen, Manchester 2025-05-14
        2. Mit dem Vergleichsoperator "≤" hatte ich vorher gearbeitet, funktionierte auch nicht.

          Wäre ja noch schöner, wenn Programmiersprachen Typografie könnten!

          Gibt es. In der APL-Familie. Ich bin etwa einmal über BQN gestolpert auf YouTube.

          1. Hallo Ryuno-Ki,

            oh ja, APL - ich erinnere mich an die 80-er Jahre, wo unsere Abteilung Versicherungsmathematik mit APL auf dem IBM Großrechner gearbeitet hat und es immer wieder Beschwerden gab, dass ein paar Mathematiker das Onlinesystem für 2000 Versicherungskaufleute plattmachten. Indem sie „ein kleines“ APL-Programm laufen ließen… Und sie hatten die APL-Tastatur, mit 3 oder 4 Shift-Tasten und Eingabetasten, die rundum mit Sonderzeichen bedruckt waren.

            Die Aussage, dass man mit APL einzeilige Programme beliebiger Komplexität erstellen könne, gilt für Logik, Lesbarkeit und Laufzeit.

            Rolf

            --
            sumpsi - posui - obstruxi
        3. Hallo,

          ich habe das Thema eigentlich abgeschlossen, muss aber trotzdem noch einmal zurückkommen.

          Also die Zeichen "≤" und "≥" habe ich in andere Scripts zigfach eingesetzt, ohne Probleme. Selbst wenn ich den Code in JSFiddle überprüfe, wird "<=" in "≤" automatisch umgewandelt.

          Es scheint also beides zu funktionieren.

          System: MacOS mit Safari

          1. @@akuep

            Also die Zeichen "≤" und "≥" habe ich in andere Scripts zigfach eingesetzt, ohne Probleme. Selbst wenn ich den Code in JSFiddle überprüfe, wird "<=" in "≤" automatisch umgewandelt.

            Nein, das siehst du falsch. Oder anders gesagt: du siehst es richtig, verstehst es aber falsch.

            Wie ich schon sagte, werden da zur Anzeige Ligaturen verwendet, sodass die beiden Zeichen <= als ein Zeichen „≤“ erscheinen. Kopiere das mal aus JSFiddle heraus und setze es irgendwo ein, wo kein Font (Schriftart) mit solchen Ligaturen verwendet wird: es sind immer noch die beiden Zeichen <=.

            Muss ja auch so sein. Der JavaScript-Interpreter versteht nur <=, nicht .

            Wie @Rolf B schon anmerkte, verwirrt das Leute, die nicht verstehen, was da vor sich geht.

            Es ist eine ziemlich bescheuerte Idee der Macher von JSFiddle, als Default für alle einen Font mit solchen Ligaturen zu verwenden.

            Nicht die erste bescheuerte Idee, und wohl auch nicht die letzte.

            🖖 Live long and prosper

            --
            “In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
            — Bruce Springsteen, Manchester 2025-05-14
            1. Hallo Gunnar Bittersmann,

              Es ist eine ziemlich bescheuerte Idee der Macher von JSFiddle, als Default für alle einen Font mit solchen Ligaturen zu verwenden.

              Bei mir passiert das nicht. Sie verwenden font-family: var(--font-code), und das custom property ist festgelegt als

              "Monaspace Argon","Monaco","Andale Mono","Lucida Console","Bitstream Vera Sans Mono","Courier New",Courier,monospace

              Hinzu kommt noch font-variant-ligatures: contextual;

              Aus meiner Sicht ist Monaspace Argon ein Webfont, den jsFiddle selbst hostet und der bei mir auch verwendet wird. Eine Ligatur für <= sehe ich nicht. Möglicherweise versteht mein Bürowindows das nicht.

              Rolf

              --
              sumpsi - posui - obstruxi
              1. @@Rolf B

                Bei mir passiert das nicht. Sie verwenden font-family: var(--font-code), und das custom property ist festgelegt als

                "Monaspace Argon","Monaco","Andale Mono","Lucida Console","Bitstream Vera Sans Mono","Courier New",Courier,monospace

                Hinzu kommt noch font-variant-ligatures: contextual;

                Aus meiner Sicht ist Monaspace Argon ein Webfont, den jsFiddle selbst hostet und der bei mir auch verwendet wird. Eine Ligatur für <= sehe ich nicht.

                Hm, ich sehe die Ligatur:

                Screenshot von JSFiddle mit geöffnetem Entwicklertool

                Im Entwicklertool sieht man als Elementinhalt <=.

                Ich hab auf die Schnelle nicht gefunden, wo das OpenType-Feature gesetzt wird. Vielleicht ist es ja per Default an für den Font Monaspace Argon.

                Ich hab auf die Schnelle auch nicht gefunden, wie man das ausstellen kann. Hab auch wenig Lust, mich durch die div-Suppe durchzuwühlen.

                Wenn ich Monaspace Argon aus --font-code rausnehme, wird in Monaco gerendert – ohne Ligatur.

                🖖 Live long and prosper

                --
                “In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
                — Bruce Springsteen, Manchester 2025-05-14
                1. Wenn ich den Font als TTF in Wakamai Fondue reinwerfe, sehe ich ss02 als passendes Stylistic Set.

  2. Hallo akuep,

    JavaScript kennt die Operatoren >= und <=. Aber nicht =<. Die Kombination => gibt es zwar auch, aber das ist weniger ein Operator als ein Syntaxkonstrukt.

    Siehe Vergleichsoperatoren in JavaScript und Pfeilfunktion

    Warum führt JS nichts aus?

    Man muss in JavaScript zwischen Fehlern beim Parsen (=Einlesen des Scripts und Umsetzen in ausführbaren Code) und Fehlern in der Ausführung unterscheiden.

    Fehler beim Parsen führen dazu, dass das ganze Script verworfen wird.

    Wenn Du hingegen eine Funktion "hugo" definierst, aber später "hugp" aufrufst, merkt er das erst bei der Ausführung und führt den Code soweit aus, wie kein Fehler auftritt.

    Rolf

    --
    sumpsi - posui - obstruxi
  3. Hallo akuep,

    ich hätte noch ein paar Fragen:

    • warum const tol_diameter = parseFloat(219.1); 219.1 ist bereits ein numerisches Literal. Floater als float geht nicht, zumindest nicht in JavaScript.

    • Warum gibst Du Variableninhalte per prompt()-Aufruf aus? Die Konsole ist offen, und die Zeiten, wo console.log() das Script gekillt hat, wenn die Konsole nicht offen war, sind vorbei. ⇒ Logging in der Konsole

    • Warum steckt das <select>-Element in einem div? Wie schon öfter erwähnt, ist Divitis eine langwierige und schmerzhafte Krankheit. Gelegentlich kann so ein div schon Sinn ergeben, z.B. wenn visuelle Deko erstellt werden soll, aber oft genug ist es überflüssig. Jedenfalls sollte es zum <select>-Element auch ein <label for="diao_input">Durchmesser</label> oder so geben. Oder hast Du das notwendige Label für das Eingabeelement anderswo untergebracht?

    • Beachte auch, dass .toFixed() wieder eine Zeichenkette erstellt. Wenn Du mit c1 also weiterrechnen willst, ist das eigentlich nicht das Mittel der Wahl. Leider hat JavaScript keine Funktion zum Runden auf die x-te Stelle, für 2 Nachkommastellen muss man c1 = Math.round(c1 * 100) / 100; rechnen. Wenn Du die toFixed-Darstellung nicht zum Rechnen, sondern für die Ausgabe brauchst, dann solltest Du Dir die Optionen für Zahlendarstellung von Intl.NumberFormat anschauen. Dem kannst Du auch sagen, wieviele Nachkommastellen es mindestens und höchstens geben soll, und er erzeugt Dir auch gleich ein Dezimalkomma statt eines Dezimalpunkts. Die Intl-Funktionen sehen wüst aus, was daran liegt, dass sie viel können, aber in der Praxis braucht man einen oder zwei Formatter, die erzeugt man einmal und dann ist gut. Der Formatter kann auch gleich das Runden übernehmen.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. Hallo Ihr Experten,

      super, es läuft. Der unkorrekte Vergleichsoperator war wohl schuld. Ich kann es nicht fassen.

      Das ich dass übersehen hatte? Eine Woche das Script nur herumexperimentiert, verändert, verändert....

      Auch für die anderen wertvollen Tipps vielen, vielen Dank. Habe sie bereits umgesetzt.

      Viele Grüße