JavaScript Ergebnis in INPUT Feld + Zahl mittels CSS formatieren – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self JavaScript Ergebnis in INPUT Feld + Zahl mittels CSS formatieren Tue, 04 Aug 20 14:11:58 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774125#m1774125 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774125#m1774125 <p>Hallo, ich habe hier im Archiv folgenden Code gefunden,</p> <pre><code class="block"> function calculate() { input1 = parseFloat( document.formular.input1.value.replace(/,/ , ".") ); input2 = parseFloat( document.formular.input2.value.replace(/,/ , ".") ); input3 = parseFloat( document.formular.input3.value.replace(/,/ , ".") ); if (typeof(input1)=="number" && input1+""=="NaN") { var input1 =0; } if (typeof(input2)=="number" && input2+""=="NaN") { var input2 =0; } if (typeof(input3)=="number" && input3+""=="NaN") { var input3 =0; } document.getElementById("output").innerHTML= (input1 + input2 + input3).toString().replace(/\./ , ","); } </code></pre> <pre><code class="block"><form name="formular" action=""> <input type="text" name="input1" class="form-control" placeholder="0" onkeyup="calculate()"/> <input type="text" name="input2" class="form-control" placeholder="0" onkeyup="calculate()"/> <input type="text" name="input3" class="form-control" placeholder="0" onkeyup="calculate()"/> <span class="form-control" id="output">000</span> </form> </code></pre> <p>Doch ich habe zwei Probleme damit. Ersten möchte ich das Ergebnis in einem INPUT Feld ausgeben lassen.</p> <p><span class="form-control" id="output">000</span></p> <p>Wenn ich den Code aber ienfach in ein INPUT Feld gebe, bleibt das Feld leer, obwohl ich im Script nichts finde</p> <p><input id="output" readonly ></p> <p>Und weiter möchte ich die Ausgabe Zahlen mittels CSS formatieren, so das aus 1000 1.000€ wird.</p> <p>Ich hoffe mal das ist kein Hexenwerk</p> <p>Franz</p> JavaScript Ergebnis in INPUT Feld + Zahl mittels CSS formatieren Tue, 04 Aug 20 14:40:15 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774126#m1774126 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774126#m1774126 <p>Hallo,</p> <blockquote> <p>Doch ich habe zwei Probleme damit. Ersten möchte ich das Ergebnis in einem INPUT Feld ausgeben lassen.</p> </blockquote> <p>warum nicht im dafür gemachten <a href="https://wiki.selfhtml.org/wiki/HTML/Formulare/Ergebnisausgabe" rel="nofollow noopener noreferrer">output-Element</a>?</p> <blockquote> <p><span class="form-control" id="output">000</span></p> <p>Wenn ich den Code aber ienfach in ein INPUT Feld gebe, bleibt das Feld leer, obwohl ich im Script nichts finde</p> <p><input id="output" readonly ></p> </blockquote> <p>ich vermute, du hast es mit <code>innerHTML</code> versucht. <code>input</code> kennt das nicht, versuch es mal mit <code>value</code>.</p> <blockquote> <p>Und weiter möchte ich die Ausgabe Zahlen mittels CSS formatieren, so das aus 1000 1.000€ wird.</p> </blockquote> <p>versuch mal <a href="https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Number/toLocaleString" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Number/toLocaleString</a></p> <p>Gruß<br> Jürgen</p> INPUT Feld als Währung während der Eingabe formatieren Wed, 05 Aug 20 08:17:53 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774163#m1774163 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774163#m1774163 <p>Das mit dem VALUE funktioniert. Danke!</p> <p>Doch ich habe immer noch das FORMAT Problem.</p> <p>Ich habe ja mehrere INPUT Felder die ich eingeben kann und mittels JAVASCRIPT ausgelesen werden und SOFORT in einem anderen INPUT Feld ausgegeben werden.</p> <p>Nun möchte ich alle Felder die EINGABE und AUSGABE INPUT Felder sofort bei der EINGABE, bzw. bei der Ausgabe formatieren.</p> <p>So das überall aus 1000 dann 1.000 € wird.</p> JavaScript Ergebnis in INPUT Feld + Zahl mittels CSS formatieren Fri, 07 Aug 20 06:19:57 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774232#m1774232 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774232#m1774232 <p>@@Franz</p> <p>Ich hab mal eine <a href="https://codepen.io/gunnarbittersmann/pen/KKzwvqE" rel="noopener noreferrer">Formatierung für Kreditkartennummern</a> (4er-Blöcke) gebaut. Das ließe sich auch auf andere Formatierungen übertragen. Ob die von dir angedachte sinnvoll ist, ist eine andere Frage – keine unwichtige.</p> <p>Besonderes Augenmerk muss man dabei auf die Cursorposition legen. Der Cursor muss nach der Umformatierung wieder hinter demselben Zeichen stehen wie vorher.</p> <p>Einen Fehler hat die Lösung noch: Wenn der Cursor nach einem Leerzeichen steht (z.B. bei <code>1234 5678</code> direkt vor der 5), dann wird beim Drücken der Delete-Taste nicht die vorige Ziffer (die 4) gelöscht. (Es wird das Leerzeichen gelöscht und sofort wieder eins eingefügt.) Man muss den Cursor vor das Leerzeichen setzen, um die Ziffer zu löschen.</p> <p>Wie kriegt man das behoben?</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> JavaScript Ergebnis in INPUT Feld + Zahl mittels CSS formatieren Tue, 04 Aug 20 14:58:49 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774127#m1774127 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774127#m1774127 <p>Meinst du so etwa?</p> <pre><code class="block language-javascript">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"output"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value<span class="token operator">=</span> <span class="token punctuation">(</span>input1 <span class="token operator">+</span> input2 <span class="token operator">+</span> input3<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.</span><span class="token regex-delimiter">/</span></span> <span class="token punctuation">,</span> <span class="token string">","</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>oder im HTML das value?</p> JavaScript Ergebnis in INPUT Feld + Zahl mittels CSS formatieren Tue, 04 Aug 20 15:11:27 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774130#m1774130 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774130#m1774130 <p>@@JürgenB</p> <blockquote> <p>ich vermute, du hast es mit <code>innerHTML</code> versucht. <code>input</code> kennt das nicht</p> </blockquote> <p>Das kann man so nicht sagen. <code>HTMLInputElement</code> erbt von <code>Element</code> die Eigenschaft <code>innerHTML</code>.</p> <p>Man kann sie auch setzen:</p> <pre><code class="block language-js"><span class="token keyword">const</span> inputElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> inputElement<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"foo"</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>inputElement<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//foo </span> </code></pre> <p>Es wirkt nur nicht wie gedacht. <code>input</code> ist ein leeres HTML-Element, hat also keinen Inhalt. Was immer man da in <code>innerHTML</code> reinschreibt, es kommt im UI nicht an.</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> JavaScript Ergebnis in INPUT Feld + Zahl mittels CSS formatieren Tue, 04 Aug 20 15:04:05 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774128#m1774128 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774128#m1774128 <p>Hallo</p> <blockquote> <p>Meinst du so etwa?</p> </blockquote> <p>ja und nein.</p> <blockquote> <p>document.getElementById("output").value= (input1 + input2 + input3).toString().replace(/./ , ",");</p> </blockquote> <p><code>document.getElementById("output").value = ...</code> ist ok, wenn denn output ein input ist, aber der Rest nicht. Dafür gibt es <a href="https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Number/toLocaleString" rel="nofollow noopener noreferrer">toLocaleString</a></p> <blockquote> <p>oder im HTML das value?</p> </blockquote> <p>nein.</p> <p>Gruß<br> Jürgen</p> JavaScript Ergebnis in INPUT Feld + Zahl mittels CSS formatieren Tue, 04 Aug 20 15:07:56 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774129#m1774129 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774129#m1774129 <p>Da war ich zu schnell mit dem Absende Button.</p> <p>Ich habs kapiert mit dem value (glaube ich jedenfalls).</p> <p>Nur dem dem Format nichts so ganz, da ich mit den eigebenen Werten weiter rechnen möchte und javascript ja aus einem 2.000 eien 2 macht.</p> <p>aktiviere ich</p> <p><strong>Number.toLocaleString([locales [, options]])</strong></p> <p>auch über Javascript?</p> <p>Franz</p> JavaScript Ergebnis in INPUT Feld + Zahl mittels CSS formatieren Tue, 04 Aug 20 20:38:59 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774149#m1774149 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774149#m1774149 <p>Hallo Franz,</p> <p>wenn du Zahlen per Tastatureingabe verarbeiten möchtest, benötigst du ein</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">…</span><span class="token punctuation">></span></span> </code></pre> <p>per javascript kannst du die Eingabe dann mit</p> <pre><code class="block language-javascript"><span class="token keyword">let</span> inputelement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"…"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> inputnumber <span class="token operator">=</span> inputelement<span class="token punctuation">.</span>valueAsNumber<span class="token punctuation">;</span> </code></pre> <p>So erhältst du eine Zahl, mit der du rechnen kannst, und keinen String aus Ziffern. Ich prüfe dann noch mit <a href="https://wiki.selfhtml.org/wiki/JavaScript/isNaN" rel="nofollow noopener noreferrer">isNaN</a> ob eine Zahl eingegeben wurde.</p> <p>Erst bei der Ausgabe kommt dann <code>toLocaleString</code> zum Einsatz.</p> <p>Gruß<br> Jürgen</p> INPUT Feld als Währung während der Eingabe formatieren Wed, 05 Aug 20 09:21:27 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774168#m1774168 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774168#m1774168 <p>Hallo Franz,</p> <p>es gibt in HTML keinen Input-Typ "currency", und damit bist Du eigentlich - gerade bei der Eingabe - schon ausgezählt. Du kannst etwas tricksen, indem Du dem input den Rand klaust und den Rand mit einem span drumherum wieder hinzufügst. Dann kannst Du das € Zeichen per HTML hinter die Eingabe kleben.</p> <pre><code class="block language-css"><span class="token selector">span.input-currency</span> <span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span>inline-block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">span.input-currency input</span> <span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input-currency<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> €<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> </code></pre> <p>Ein Tausenderseparator während der Eingabe würde bedeuten, dass Du nach jedem change des Input-Elements den Inhalt ausliest, alles außer Ziffern entfernst und dann Tausenderpunkte einsetzt. Keine Ahnung, welche Anwendererfahrung das bedeutet. Copy im Input-Feld und Paste anderswo würde den Tausenderpunkt mitnehmen. Allerdings artet das in ein wüstes Gefummel mit der Cursorposition aus, das ist mir jetzt in 10 Minuten Basteln nicht gelungen. Da muss man den Wert vor der Eingabe haben, muss gucken, wieviele Punkte im alten Feldinhalt links vom Cursor waren, sehr umständlich. Wenn Du keine Berührungsängste zu jQuery hast, <a href="https://plentz.github.io/jquery-maskmoney/" rel="nofollow noopener noreferrer">da gibt's ein passendes Plugin</a>. Aber mutmaßlich gibt's sowas auch stand-alone.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Alle Zeichen entfernen ausser ZAHLEN Wed, 05 Aug 20 15:04:03 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774175#m1774175 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774175#m1774175 <p>Wenn ich die Ausgabe formatiere, mittels php bzw. Javascript und bei der Eingabe alle Buchstaben etc. löschen könnte es doch funktionieren?</p> <p><strong>getInputAsFloat(document.formular.Input3).replace(/[^0-9 ]/g, "")</strong></p> <p>Aber ich glaube ich habe das replace nicht korrekt verwendet</p> Alle Zeichen entfernen ausser ZAHLEN Wed, 05 Aug 20 15:24:15 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774178#m1774178 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774178#m1774178 <p>Jetzt habe ich vor lauter schnell schnell die function vergessen zu posten</p> <p>Also erst auslesen und alle Zeichen ausser Zaheln löschen</p> <p><strong>getInputAsFloat(document.formular.Input3);</strong></p> <pre><code class="block">function getInputAsFloat(element) { let input = parseFloat(element.value.replace(/[^a-zA-Z0-9 ]/g, "") ); return (isNaN(input)) ? 0 : input; } </code></pre> <p>dann irgendwie wieder formatiert ausgeben</p> Alle Zeichen entfernen ausser ZAHLEN Wed, 05 Aug 20 15:54:02 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774180#m1774180 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774180#m1774180 <p>Hallo Franz,</p> <p>einatmen. Ausatmen. Ruhe. Ok?</p> <p>Den Replace brauchst Du nur einmal. In der Function. Vor dem parseFloat. Aber wenn Du a-zA-Z in den replace mit hinein nimmst, dann bleiben auch die ASCII Buchstaben stehen. Der Replace, den du außerhalb der Funktion aufrufst, wäre richtig. Nur geht der schief, weil die Funktion keinen String, sondern eine Zahl liefert. Also: Replace außerhalb der Funktion weg, und beim Replace innerhalb der Funktion die Regex fixen.</p> <p>Das ist aber nur das Lesen des Wertes als Zahl, und damit nur die halbe Miete. Wenn Du die Tausendertrenner und das Eurozeichen im Input sichtbar haben willst, dann müsstest Du während der Benutzereingabe ständig nachkorrigieren. Und das verhagelt dem Anwender die Freude an der Eingabe, weil das Überschreiben des Wertes den Cursor ans Feldende stellt. Und <strong>den</strong> korrekt nachzuführen, macht die von mir erwähnte Mühe. Du kannst input-Inhalte nach Verlassen des Feldes natürlich per Script formatieren.</p> <p><strong>Noch ein Tipp:</strong> Der parseFloat sollte dann eigentlich immer gelingen, außer wenn keine einzige Ziffer im Feld stand. Dann gibt's NaN. An der Stelle kannst Du Dir zu Nutze machen, dass NaN ein falsy value ist, d.h. bei booleschen Vergleichen wie FALSE behandelt wird. Du kannst Dir weiterhin zu Nutze machen, dass die booleschen Operatoren && und || nicht true und false zurückgeben, sondern einen ihrer Operanden.</p> <pre><code class="block">a && b ergibt a wenn a falsy ist und b, wenn a truthy ist. a || b ergibt a, wenn a truthy ist und b, wenn a falsy ist. </code></pre> <p>Demnach ist <code>parseFloat(xyz) || 0</code> ein einfaches Mittel, um ein NaN Ergebnis auf 0 umzusetzen.</p> <p>Also (mit Trennung von Lesen und Konvertieren):</p> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token function">getInputAsFloat</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> inhalt <span class="token operator">=</span> element<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[^0-9 ]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> value <span class="token operator">=</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span>inhalt<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> value <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>oder als Einzeiler</p> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token function">getInputAsFloat</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span>element<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[^0-9 ]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Alle Zeichen entfernen ausser ZAHLEN Wed, 05 Aug 20 16:36:40 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774183#m1774183 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774183#m1774183 <p>Hallo Rolf,</p> <blockquote> <p>Du kannst input-Inhalte nach Verlassen des Feldes natürlich per Script formatieren.</p> </blockquote> <p>das sollte man aber nicht tun, finde ich. Denn das wirkt überheblich: "Ich weiß, was du meinst, und ich weiß im Gegensatz zu dir auch, wie man es richtig schreibt."</p> <p>Natürlich sollte ein Programm mit Eingaben möglichst flexibel und fehlertolerant umgehen, aber bitte nicht dem Nutzer über den Mund fahren.</p> <blockquote> <pre><code class="block">a && b ergibt a wenn a falsy ist und b, wenn a truthy ist. a || b ergibt a, wenn a truthy ist und b, wenn a falsy ist. </code></pre> </blockquote> <p>Bist du sicher? Dann würde <strong>true && false</strong> false ergeben. Ein völlig unerwartetes Ergebnis. Meines Wissens ist dieses Auswahl-Verfahren nur beim Oder-Operator richtig.</p> <p><strong>EDIT:</strong> Nochmal drüber nachgedacht ... ähm, doch, stimmt doch! Was fasel ich da für einen Quatsch?</p> <blockquote> <p>Demnach ist <code>parseFloat(xyz) || 0</code> ein einfaches Mittel, um ein NaN Ergebnis auf 0 umzusetzen.</p> </blockquote> <p>Ja, aber tückisch, weil Javascript wohl so ziemlich die einzige Sprache, die den Oder-Operator so implementiert.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Home is where my beer is. </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Thu, 06 Aug 20 14:08:21 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774217#m1774217 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774217#m1774217 <p>Danke...</p> <p>Je weiter ich gehe, desto mehr Fragen tun sich auf!</p> <p>Da ich mein Script auf mehreren Seiten hernehmen möchte, kann es sein, das manchmal die ein oder andere Variable nicht existiert. Wenn das der Fall ist, wird das Script nicht ausgeführt. Gibt es eine Möglichkeit, so eine eingelesene Variable, dann einfach auf 0 zu setzen. So dass das Script trotzdem ausgeführt wird.</p> <pre><code class="block">let summe_1 = getInputAsFloat(document.formular.FeldWert1) + getInputAsFloat(document.formular.FeldWert2) + getInputAsFloat(document.formular.FeldWert3) + getInputAsFloat(document.formular.FeldWert4) + getInputAsFloat(document.formular.FeldWert5) + getInputAsFloat(document.formular.FeldWert6); </code></pre> Alle Zeichen entfernen ausser ZAHLEN Wed, 05 Aug 20 16:48:26 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774184#m1774184 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774184#m1774184 <p>Hallo Der Martin,</p> <blockquote> <blockquote> <pre><code class="block">a && b ergibt a wenn a falsy ist und b, wenn a truthy ist. a || b ergibt a, wenn a truthy ist und b, wenn a falsy ist. </code></pre> </blockquote> <p>Bist du sicher? Dann würde <strong>true && false</strong> false ergeben. Ein völlig unerwartetes Ergebnis.</p> </blockquote> <p>Wahrum?</p> <p>Das logische <em>UND</em> ist nur dann wahr, wenn beide Operanden wahr sind.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> Alle Zeichen entfernen ausser ZAHLEN Wed, 05 Aug 20 17:43:58 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774190#m1774190 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774190#m1774190 <p>@@Der Martin</p> <blockquote> <p>Dann würde <strong>true && false</strong> false ergeben. Ein völlig unerwartetes Ergebnis.</p> </blockquote> <p>Du solltest deine Erwartungen nicht so hochschrauben. </p> <blockquote> <p>Ja, aber tückisch, weil Javascript wohl so ziemlich die einzige Sprache, die den Oder-Operator so implementiert.</p> </blockquote> <p>Du meinst, man sollte ein Feature einer Sprache nicht einsetzen, weil es ein Feature dieser Sprache ist? </p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> Alle Zeichen entfernen ausser ZAHLEN Wed, 05 Aug 20 16:55:47 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774185#m1774185 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774185#m1774185 <p>Hallo,</p> <blockquote> <p>Das logische <em>UND</em> ist nur dann wahr, wenn beide Operanden wahr sind.</p> </blockquote> <p>Diese Aussage ist hier nicht hilfreich, weil es nicht darum geht, wahr/falsch zu bekommen, sondern tatsächliche Werte durchgereicht werden.<br> Das geht offenbar in JavaScript einerseits weil die entsprechenden Kurzschluss-Operatoren verwendet werden. Andererseits aber vor allem weil Werte truthy/falsy sein können.</p> <p>Gruß<br> Kalk</p> Alle Zeichen entfernen ausser ZAHLEN Wed, 05 Aug 20 16:58:29 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774186#m1774186 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774186#m1774186 <p>Hallo Tabellenkalk,</p> <blockquote> <blockquote> <p>Das logische <em>UND</em> ist nur dann wahr, wenn beide Operanden wahr sind.</p> </blockquote> </blockquote> <blockquote> <p>Diese Aussage ist hier nicht hilfreich, weil es nicht darum geht, wahr/falsch zu bekommen, sondern tatsächliche Werte durchgereicht werden.</p> </blockquote> <p>Ich bezog mich auf des Martins Beispiel. true ist truthy, false ist falsy,</p> <p>true && false ist richtigerweise false.</p> <p>Oder ich habe das völlig falsch verstanden.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> Alle Zeichen entfernen ausser ZAHLEN Wed, 05 Aug 20 17:01:06 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774187#m1774187 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774187#m1774187 <p>Hi,</p> <blockquote> <blockquote> <p>Das logische <em>UND</em> ist nur dann wahr, wenn beide Operanden wahr sind.</p> </blockquote> <p>Diese Aussage ist hier nicht hilfreich, weil es nicht darum geht, wahr/falsch zu bekommen, sondern tatsächliche Werte durchgereicht werden.</p> </blockquote> <p>zumal ich mein Durcheinander selbst schon erkannt und kommentiert habe.</p> <blockquote> <p>Das geht offenbar in JavaScript einerseits weil die entsprechenden Kurzschluss-Operatoren verwendet werden. Andererseits aber vor allem weil Werte truthy/falsy sein können.</p> </blockquote> <p>Beide Aussagen treffen auf C ebenfalls zu.<br> Aber in C liefern die logischen Operatoren immer nur ein true (1) oder false (0).</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Home is where my beer is. </div> Alle Zeichen entfernen ausser ZAHLEN Wed, 05 Aug 20 17:24:11 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774188#m1774188 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774188#m1774188 <p>Hallo Martin,</p> <blockquote> <p>Aber in C liefern die logischen Operatoren immer nur ein true (1) oder false (0).</p> </blockquote> <p>Das ist nicht nur in C so. In allen mir bekannten anderen Sprachen (außer JS eben) auch (bis auf das stdbool.h Mapping false=0 und true=1).</p> <p>Sorry für das Durcheinander, das ich in deinem Kopf angerichtet habe </p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Alle Zeichen entfernen ausser ZAHLEN Wed, 05 Aug 20 17:53:55 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774191#m1774191 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774191#m1774191 <p>Hallo Gunnar,</p> <p>er meint völlig zu Recht, dass JavaScript eine Sprache von Sergio Leone ist. The Good, the Bad and the Ugly. Diese || Implementierung ist definitiv Tuco, auch wenn <a href="https://smile.amazon.de/Douglas-Crockford/dp/0596517742" rel="nofollow noopener noreferrer">Douglas Crockford</a> es nicht unter "Awful" oder "Bad" auflistet.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Alle Zeichen entfernen ausser ZAHLEN Wed, 05 Aug 20 18:48:25 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774193#m1774193 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774193#m1774193 <p>Hallo,</p> <blockquote> <blockquote> <p>Dann würde <strong>true && false</strong> false ergeben. Ein völlig unerwartetes Ergebnis.</p> </blockquote> <p>Du solltest deine Erwartungen nicht so hochschrauben. </p> </blockquote> <p>ja ja, lacht ihr nur. </p> <blockquote> <blockquote> <p>Ja, aber tückisch, weil Javascript wohl so ziemlich die einzige Sprache, die den Oder-Operator so implementiert.</p> </blockquote> <p>Du meinst, man sollte ein Feature einer Sprache nicht einsetzen, weil es ein Feature dieser Sprache ist? </p> </blockquote> <p>Ähm ... eher weil es ein Feature <strong>nur</strong> dieser Sprache ist.</p> <p>Siehste, sowohl Javascript als auch PHP werden oft mit dem Attribut "C-ähnliche Syntax" beschrieben. Das birgt die Gefahr, dass man dann auch annimmt, die Semantik wäre ebenfalls C-ähnlich.</p> <p>Deswegen würde ich, wenn ich denn ein Feature nutze, dass so von der Erwartung abweicht, zumindest mit einem Kommentar im Code deutlich darauf hinweisen.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Home is where my beer is. </div> Alle Zeichen entfernen ausser ZAHLEN Wed, 05 Aug 20 18:44:06 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774192#m1774192 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774192#m1774192 <p>@@Rolf B</p> <blockquote> <p>er meint völlig zu Recht, dass JavaScript eine Sprache von Sergio Leone ist.</p> </blockquote> <p>JavaScript klingt doch gut. Morricone eben.</p> <blockquote> <p>Diese || Implementierung ist definitiv Tuco</p> </blockquote> <p>Ich frag mich, warum das in anderen Sprachen nicht auch so implementiert ist. Sehr elegante Möglichkeit, einen Fallback anzugeben.</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> Alle Zeichen entfernen ausser ZAHLEN Thu, 06 Aug 20 15:09:34 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774221#m1774221 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774221#m1774221 <blockquote> <p>Ich frag mich, warum das in anderen Sprachen nicht auch so implementiert ist. Sehr elegante Möglichkeit, einen Fallback anzugeben.</p> </blockquote> <p>Viele Sprachen haben vergleichbare Operatoren:</p> <ul> <li><a href="https://en.wikipedia.org/wiki/Null_coalescing_operator" rel="nofollow noopener noreferrer">https://en.wikipedia.org/wiki/Null_coalescing_operator</a></li> <li><a href="https://en.wikipedia.org/wiki/Elvis_operator" rel="nofollow noopener noreferrer">https://en.wikipedia.org/wiki/Elvis_operator</a></li> </ul> <p>In JavaScript gibt es außerdem noch <code>a ?? b</code>. Der Ausdruck gibt <code>b</code> zurück falls <code>a</code> zu <code>null</code> oder <code>undefined</code> evaluiert, ansonsten wird <code>a</code> zurückgegeben.</p> Alle Zeichen entfernen ausser ZAHLEN Wed, 05 Aug 20 19:49:12 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774194#m1774194 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774194#m1774194 <p>Hallo Martin,</p> <blockquote> <p>Kommentar</p> </blockquote> <p>das ist aus Sicht eines Multi-Sprachnutzers vermutlich nahe liegend. Ein JavaScript Schwerpunktprogrammierer würde dagegen die Schultern zucken und den Kommentar genauso löschen, wie Du den hier löschen würdest:</p> <pre><code class="block language-js"><span class="token keyword">const</span> j <span class="token operator">=</span> <span class="token number">17</span><span class="token punctuation">;</span> <span class="token comment">// Konstante j auf 17 initialisieren</span> </code></pre> <p>Die || Notation um einen Default für falsy-Werte zu erzeugen ist in JS durchaus üblich, genauso wie <code>a >>> 0</code> dazu dient, einen nicht numerischen Wert in a durch 0 zu ersetzen.</p> <p>Idiomatisch und idiotisch liegen nun mal nahe beieinander </p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Alle Zeichen entfernen ausser ZAHLEN Fri, 07 Aug 20 06:39:03 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774233#m1774233 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774233#m1774233 <p>@@Der Martin</p> <blockquote> <p>ja ja, lacht ihr nur. </p> </blockquote> <p>Aber gerne doch.</p> <blockquote> <blockquote> <p>Du meinst, man sollte ein Feature einer Sprache nicht einsetzen, weil es ein Feature dieser Sprache ist? </p> </blockquote> <p>Ähm ... eher weil es ein Feature <strong>nur</strong> dieser Sprache ist.</p> </blockquote> <p>Dann sollte man in C (C++) auf Pointer verzichten‽</p> <p>Ich glaube, dein Argument hat so seine Schwächen.</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Thu, 06 Aug 20 14:15:12 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774218#m1774218 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774218#m1774218 <p>@@Franz</p> <blockquote> <p>Gibt es eine Möglichkeit, so eine eingelesene Variable, dann einfach auf 0 zu setzen. So dass das Script trotzdem ausgeführt wird.</p> </blockquote> <p>War das eine Frage.</p> <p>Und ja, gibt es. Wurde in diesem Thread sogar schon <a href="https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774180#m1774180" rel="noopener noreferrer">genannt</a>.</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Thu, 06 Aug 20 19:18:20 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774229#m1774229 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774229#m1774229 <p>Hallo Franz,</p> <p>natürlich wird dein Script ausgeführt. Es läuft nur auf einen Fehler und bricht ab. Das siehst Du in der Browser-Konsole.</p> <p>Hä? Was ist das? Drücke die F12 Taste (wenn's das bei Dir nicht ist, suche in den Browser-Menüs oder in der Browser-Doku nach "Entwicklerwerkzeugen" oder "Developer Tools".</p> <p>Die Entwicklerwerkzeuge haben bei den gängigen Browsern alle ein Tab-Layout mit Seiten für: DOM Inspektor (oder "Elements"), Console, Quellcodes (oder "Sources"), Netzwerkverkehr. Und noch mehr Seiten.</p> <p>Mit dem DOM Inspektor kannst Du überprüfen, was der Browser und deine Scripte aus deinem HTML gemacht haben</p> <p>Auf der Sources Seite siehst Du die geladenen Dateien (HTML, CSS, Script). In Skripten kannst Du Breakpoints setzen (meistens mit Klick auf die Zeilennummer, dann gibt's einen roten Punkt). Möchte der Browser diese Zeile ausführen, hält er an und du kannst deine Variablen inspizieren und mit den Buttons auf dieser Seite einfach fortsetzen, oder Schritt für Schritt dem Code folgen.</p> <p>In der Konsole erscheinen Meldungen, die Du im Script mit console.log() ausgibst, und alle Fehlermeldungen. Du kannst da auch direkt JavaScript eingeben, es wird sofort ausgeführt.</p> <p>Ich würde behaupten, dass bei Dir dort etwas wie dies hier steht (so wie hier zeigt es Chrome an):</p> <pre><code class="block">Uncaught TypeError: Cannot read property 'value' of undefined at getInputAsFloat (<anonymous>:2:34) </code></pre> <p>Er will das Property <code>value</code> lesen. Und zwar auf einem undefined-Wert. In Zeile 2, Spalte 34 von getInputAsFloat.</p> <p>Watson, das kriegen Sie raus. Wieso ist da undefined? Wie fange ich das ab?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Thu, 06 Aug 20 14:43:48 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774219#m1774219 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774219#m1774219 <p>Ja, habe ich gesehen und umgesetzt, aber ich meine, wenn ich versuche eine Variable einzulesen, die es gar nicht gibt.</p> <p>Wenn wie hier 4,5,6 gar nicht übermittelt wurden, weil sie überhaupt nicht vorhanden sind... Wenn sie da sind und nur keinen Eintrag haben geht es, aber eben nicht wenn sie nicht einmal deklariert wurden.</p> <pre><code class="block">let summe_1 = getInputAsFloat(document.formular.FeldWert1) + getInputAsFloat(document.formular.FeldWert2) + getInputAsFloat(document.formular.FeldWert3) + getInputAsFloat(document.formular.FeldWert4) + getInputAsFloat(document.formular.FeldWert5) + getInputAsFloat(document.formular.FeldWert6); </code></pre> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Thu, 06 Aug 20 15:00:36 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774220#m1774220 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774220#m1774220 <p>Hallo Franz,</p> <pre><code class="block language-js"><span class="token function">getInputAsFloat</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>formular<span class="token punctuation">.</span>FeldWert1 <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Aber vielleicht solltest du zu beginn auf diese Weise alle Werte einsammeln.</p> <pre><code class="block language-js"><span class="token keyword">let</span> s1 <span class="token operator">=</span> document<span class="token punctuation">.</span>formular<span class="token punctuation">.</span>FeldWert1 <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">;</span> </code></pre> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Thu, 06 Aug 20 16:32:43 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774222#m1774222 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774222#m1774222 <p>Also entweder stelle ich mich zu bl... an, oder irgendetwas funktioniert nicht</p> <pre><code class="block">let summe_1 = getInputAsFloat(document.formular1.FeldWert1 || 0) + getInputAsFloat(document.formular1.FeldWert2 || 0) + getInputAsFloat(document.formular1.FeldWert3 || 0) ; </code></pre> <p>und was ist der Unterschied:</p> <p>let s1 = document.formular.FeldWert1 || 0;</p> <p>Franz</p> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Thu, 06 Aug 20 17:51:02 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774225#m1774225 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774225#m1774225 <p>Hallo Franz,</p> <blockquote> <p>Also entweder stelle ich mich zu bl... an, oder irgendetwas funktioniert nicht</p> </blockquote> <p>Was liefern denn die Kontrollausgaben?</p> <blockquote> <p>und was ist der Unterschied:</p> </blockquote> <p>Es ist vielleicht übersichtlicher.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Thu, 06 Aug 20 18:18:04 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774227#m1774227 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774227#m1774227 <p>Hallo,</p> <blockquote> <p>irgendetwas funktioniert nicht</p> </blockquote> <p>gewöhn dich dran, irgendwas ist immer…</p> <p>Aber erzähl doch mal genauer!</p> <blockquote> <p>und was ist der Unterschied zwischen summe_1 und s1</p> </blockquote> <p>summe als Variablenname ist sprechender als ein einzelnes s.</p> <p>Und wenn du keine Funktion nimmst, die laut sprechendem Funktionsnamen ein Input entgegennimmt und ein Float ausgibt, kann es dir passieren, dass JS dir die Zeichenketten einfach verkettet statt zu addieren.</p> <p>Gruß<br> Kalk</p> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 06:42:47 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774234#m1774234 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774234#m1774234 <p>Aber wie fange ich den Fehler ab?</p> <p>ich habe es hier mal engestellt</p> <p><a href="https://jsfiddle.net/2bwLfxz5/" rel="noopener noreferrer">https://jsfiddle.net/2bwLfxz5/</a></p> <p>Einmal so das es geht, und einmal nicht funktionierend. Vielleicht kann mir ja Sherlock helfen, ich nehme auch jeden anderen Detektiv oder Mechaniker, der es weis.</p> <p>Franz</p> JavaScript Ergebnis in INPUT Feld + Zahl mittels CSS formatieren Fri, 07 Aug 20 09:11:16 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774241#m1774241 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774241#m1774241 <p>@@Gunnar Bittersmann</p> <blockquote> <p>Einen Fehler hat die Lösung noch: Wenn der Cursor nach einem Leerzeichen steht (z.B. bei <code>1234 5678</code> direkt vor der 5), dann wird beim Drücken der Delete-Taste nicht die vorige Ziffer (die 4) gelöscht. (Es wird das Leerzeichen gelöscht und sofort wieder eins eingefügt.) Man muss den Cursor vor das Leerzeichen setzen, um die Ziffer zu löschen.</p> <p>Wie kriegt man das behoben?</p> </blockquote> <p><code>keydown</code>-Event abfangen; wenn Backspace gedrückt wurde und kein Bereich selektiert wurde: zwei Zeichen löschen, Cursor wieder richtig positionieren.</p> <p>Im <a href="https://codepen.io/gunnarbittersmann/pen/KKzwvqE" rel="noopener noreferrer">Codepen</a> ergänzt.</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> Alle Zeichen entfernen ausser ZAHLEN Fri, 07 Aug 20 07:06:31 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774236#m1774236 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774236#m1774236 <p>Hallo,</p> <blockquote> <blockquote> <blockquote> <p>Du meinst, man sollte ein Feature einer Sprache nicht einsetzen, weil es ein Feature dieser Sprache ist? </p> </blockquote> <p>Ähm ... eher weil es ein Feature <strong>nur</strong> dieser Sprache ist.</p> </blockquote> <p>Dann sollte man in C (C++) auf Pointer verzichten‽</p> </blockquote> <p>warum? Das ist schließlich ein Konzept vieler Sprachen.</p> <blockquote> <p>Ich glaube, dein Argument hat so seine Schwächen.</p> </blockquote> <p>Kann schon sein, aber das war dann ein schlechtes Beispiel.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Home is where my beer is. </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 06:47:22 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774235#m1774235 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774235#m1774235 <p>Hallo Franz,</p> <p>ich sag's Dir nicht vor. Dazu ist es eigentlich zu trivial, und es ist einfach ideal, um in den Umgang mit Fehlern einzusteigen. Um damit korrekt umzugehen, brauchst Du natürlich Kenntnisse über die <a href="https://wiki.selfhtml.org/wiki/JavaScript/Verzweigung" rel="nofollow noopener noreferrer">bedingten Anweisungen</a> in JavaScript. Ich nehme mal an, dass Du bisher nur lineare Abläufe programmiert hast. Du kannst Dir auch gerne andere <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Einstieg" rel="nofollow noopener noreferrer">Einsteiger-Tutorials</a> in der JavaScript-Abteilung unseres Wikis anschauen.</p> <p>Die 3 Fehlermeldungen in der Konsole hast Du gefunden? Ist Dir klar, in welcher Variablen im Moment des Fehlers ein undefined-Wert steht?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 07:09:42 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774237#m1774237 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774237#m1774237 <p>du meiste diese</p> <pre><code class="block"> Uncaught TypeError: element.value is undefined getInputAsFloat http://localhost/test/rechner.js:23 bp_calculate http://localhost/test/rechner.js:10 onkeyup http://localhost/test/formular.php:1 </code></pre> <p>Ich denke mal das man den Fehler in der Funktion getInputAsFloat abfangen kann, könnte, muss!</p> <pre><code class="block">function getInputAsFloat(element) { # # Wahrscheinlich hier? # return parseFloat(element.value.replace(/[^0-9 ]/g, "")) || 0; } </code></pre> <p>Der Wald hat sehr viele Bäume, aber ich sehe keine ;_)</p> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 07:57:37 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774238#m1774238 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774238#m1774238 <p>Hallo Franz,</p> <p>so weit, so gut, und Du denkst richtig.</p> <blockquote> <p>Uncaught TypeError: element.value is undefined</p> </blockquote> <p>Das ist die Firefox-Meldung? Chrome meldet</p> <blockquote> <p>Uncaught TypeError: Cannot read property 'replace' of undefined</p> </blockquote> <p>Was auf's gleiche hinausläuft, weil replace ja auf das Ergebnis von <code>element.value</code> angewendet wird.</p> <p>Tatsächlich zeigt diese Fehlermeldung aber, dass Du zwei Problemstellen hast. Einmal beim Aufruf von getElementAsFloat, und einmal innerhalb von getElementAsFloat. Die Frage, warum <code>element.value</code> zu undefined ausgewertet wird, braucht schon etwas Spürsinn.</p> <p>Frage 1: Welcher Wert entsteht aus <code>document.formular_n.Wert4n</code>, wenn es das Feld Wert4n nicht gibt?</p> <p>Frage 2: Und welcher Wert entsteht dann aus <code>document.formular_n.Wert4n || 0</code>?</p> <p>Frage 3: Wenn der so entstehende Wert in <code>getElementAsFloat</code> hineingegeben wird, was entsteht dann aus <code>element.value</code>?</p> <p>Frage 4: Ist das <code>|| 0</code> in Frage 2 eine gute Idee? (Tipp: Die Antwort lautet „Nein“)</p> <p>Frage 5: Wie kannst Du in <code>getElementAsFloat</code> mit der Situation umgehen, dass dass in <code>element</code> das Ergebnis aus Frage 1 hereinkommt? (Tipp: <code>if</code>)</p> <p>Zum Beantworten solcher Fragen kann es helfen, sich Teilergebnisse anzuschauen. Im Firefox musst Du aber von https auf http zurückschalten (in der Adresszeile das s von https entfernen und ENTER drücken), sonst bekommst Du den Sourcecode im Ergebnisfenster nicht zu sehen. Du findest ihn dann im Zweig fiddle.jshell.net / 2bwLfxz5/show / (index).</p> <p>Setze in der Debugger-Ansicht der Firefox-Entwicklertools einen Breakpoint auf die <code>let summe_1 = ...</code> Zeile (Klick auf die Zeilennummer davor, es kommt ein <s>roter Punkt</s> blauer Pfeil (roter Punkt ist Chrome) - nochmal klicken entfernt ihn).</p> <p>Tipp eine Ziffer in eins der Eingabefelder, und er sollte anhalten.</p> <p>Schau Dir dann an, welche Werte die fraglichen Teilausdrücke von oben ergeben. Das geht entweder durch Eintippen der Teilausdrücke in die Konsole, oder mit der Maus. Halte die Maus einfach mal über <code>Wert4n</code> in <code>document.formular.Wert4n</code>. Bei komplexeren Ausdrücken geht das nicht mehr, du kannst aber den fraglichen Ausdruck mit der Maus markieren, rechte Maustaste drücken und "evaluieren in Konsole" nutzen.</p> <p>Um <code>element.value</code> zu untersuchen, muss er natürlich erstmal in die Funktion hineingelaufen sein. Einen Einzelschritt in eine Funktion hinein machst Du mit der F11-Taste. Mit der F8-Taste setzt Du den Programmablauf fort.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 09:09:48 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774240#m1774240 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774240#m1774240 <p>Erstmal, vielen Dank das du so eine Geduld mit mir hast.</p> <p>Bin ich hie auf dem richtigen Weg?</p> <pre><code class="block">function getInputAsFloat(element) { if(typeof element.value == 'undefined'){ // Hier müsste dann die fehlende Variable angelegt werden... (denke ich) } let inhalt = element.value.replace(/[^0-9 ]/g, ""); let value = parseFloat(inhalt); return value; } </code></pre> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 09:50:16 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774247#m1774247 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774247#m1774247 <p>Hallo Franz,</p> <pre><code class="block language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> element<span class="token punctuation">.</span>value <span class="token operator">==</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> </code></pre> <p>das würde Dir isoliert betrachtet tatsächlich helfen, aber das Ergebnis wäre unterm Strich nicht ordentlich. Es funktioniert nämlich nur, wenn dieses <code>|| 0</code> beim Aufruf von getInputAsFloat stehen bleibt, das sollte es aber nicht. Ich beantworte mal einen Teil meiner Fragen von vorhin:</p> <blockquote> <p>Frage 1: Welcher Wert entsteht aus document.formular_n.Wert4n, wenn es das Feld Wert4n nicht gibt?</p> </blockquote> <p><em>Das Ergebnis ist <code>undefined</code></em></p> <blockquote> <p>Frage 2: Und welcher Wert entsteht dann aus document.formular_n.Wert4n || 0?</p> </blockquote> <p><em>Da <code>undefined</code> als falsy betrachtet wird (siehe auch meinen Abschnitt <a href="https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Boolean#Was_ist_Wahrheit.3F" rel="nofollow noopener noreferrer">"Was ist Wahrheit"</a> im Self-Wiki), gibt der <code>||</code> Operator seinen rechten Operanden zurück. Der Wert des Ausdrucks ist daher 0.</em></p> <blockquote> <p>Frage 4: Ist das || 0 in Frage 2 eine gute Idee?</p> </blockquote> <p><em>Nein. Der Ausdruck liefert dann entweder ein Objekt vom Typ HTMLInputElement oder die Zahl 0. Ausdrücke, die gemischte Typen zurückliefern, sind schlechter Stil, das sollte man meiden. Das <code>|| 0</code> wegzulassen ist besser. <code>undefined</code> ist zwar auch ein anderer Typ (<code>undefined</code> ist der einzige Wert des <code>undefined</code> Typs), aber es ist immerhin der übliche Wert für „da existiert etwas nicht“. Und wenn man schon zwischen Typen unterscheiden muss, dann mit möglichst wenig Code.</em></p> <p>Lass also diese || 0 Korrektur im Aufruf weg. Du bekommst bei fehlenden Feldern dann <code>undefined</code> in die Funktion hinein. Und nun überlege Dir, wie Du damit umgehst, dass in <code>element</code> dieser Wert drinsteht.</p> <p>Eine Variable anzulegen ist jedenfalls nicht nötig. Welche sollte es sein? Und warum überhaupt? Welchen Wert erwartest Du von <code>getInputAsFloat</code> denn sinnvollerweise zurück, wenn das input-Element nicht existiert?</p> <p>Ich hätte aber zu dieser Codezeile noch allgemeine Anmerkungen:</p> <ul> <li>statt <code>typeof irgendwas == 'undefined'</code> kannst Du auch direkt mit der eingebauten Konstanten <code>undefined</code> vergleichen. Dabei ist auf das Dreifachgleich zu achten, weil das Doppelgleich versucht, die verglichenen Werte aneinander anzupassen, wenn sie verschiedene Typen haben. Beispielsweise würden Abfragen wie <code>null == undefined</code> oder <code>0 == ""</code> behaupten, das sei gleich.</li> </ul> <pre><code class="block language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span>irgendwas <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> </code></pre> <ul> <li>wenn Du genau weißt, dass bei einer Abfrage <strong>entweder</strong> ein Objekt <strong>oder</strong> <code>undefined</code> oder <code>null</code> vorkommt, dann kannst Du ausnutzen, dass ein Objekt immer truthy ist und die Werte <code>undefined</code> und <code>null</code> falsy sind (hast Du „Was ist Wahrheit“ gelesen?).</li> </ul> <p>Ein gültiges input-Element wird also als truthy betrachtet. Und damit kannst Du kompakt schreiben:</p> <pre><code class="block language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Element ist da</span> <span class="token punctuation">}</span> <span class="token comment">// oder</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token operator">!</span>element <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Element ist nicht da</span> <span class="token punctuation">}</span> </code></pre> <p>Solche Abfragen sind sprachtypisch für JavaScript, davor solltest Du keine Angst haben.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 10:16:40 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774252#m1774252 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774252#m1774252 <p>ich gehe jetzt in den Keller und trinke was :_)</p> <pre><code class="block">function getInputAsFloat(element) { if(!element){ return 0; } else{ let inhalt = element.value.replace(/[^0-9 ]/g, ""); let value = parseFloat(inhalt); return value|| 0; } } </code></pre> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 10:36:33 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774253#m1774253 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774253#m1774253 <p>Hallo Franz,</p> <p>ich bin schon im Keller und schwitze (weil da eine Glastür ist und die Sonne draufscheint) </p> <p>Wenn Du das || 0 beim Aufruf entfernt hast, dann bist Du jetzt richtig.</p> <p>Um Dir noch etwas Stress zu machen: JavaScript ist ja wie C oder APL eine Sprache, die einzeilige Programme beliebiger Komplexität erlaubt:</p> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token function">getInputAsFloat</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> element<span class="token operator">?</span><span class="token function">parseFloat</span><span class="token punctuation">(</span>element<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[^0-9 ]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">||</span><span class="token number">0</span><span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Versteht nur (fast) keiner mehr... </p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 10:38:51 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774254#m1774254 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774254#m1774254 <p>Hallo,</p> <blockquote> <p>ich gehe jetzt in den Keller und trinke was :_)</p> </blockquote> <p>du trinkst im Keller? <br> Ich gehe höchstens in den Keller, um mir was zum Trinken zu <strong>holen</strong>.</p> <blockquote> <pre><code class="block">function getInputAsFloat(element) { if(!element){ return 0; } else{ let inhalt = element.value.replace(/[^0-9 ]/g, ""); let value = parseFloat(inhalt); return value|| 0; } } </code></pre> </blockquote> <p>Hmm. Zwei Variablen eingeführt für nix und wieder nix. Jeden Schritt einzeln. <em>Meine</em> Vorstellung von übersichtlich oder gar effizient ist das nicht. Also jetzt nochmal dasselbe, ohne die Flasche nach jedem Schluck wieder abzustellen:</p> <pre><code class="block">function getInputAsFloat(element) { return (element ? parseFloat(element.value.replace(/[^0-9 ]/g, "")) || 0 : 0); } </code></pre> <p>Sieht doch gleich viel kompakter und klarer aus, finde ich.</p> <p>Und dann wäre da noch was: Die Namensgebung sagt, dass du einen float-Wert erwartest, also eine gebrochene Zahl. Dein radikales replace bügelt aber alles weg, was keine Ziffer ist. Eine Eingabe von <strong>3.14</strong> kommt also als <strong>314</strong> zurück, <strong>-1.5</strong> als <strong>15</strong>. Soll das so sein?</p> <p>Und was ist mit sehr großen oder sehr kleinen Zahlen? Wenn Eingaben in der Größenordnung von Millionen realistisch sind, möchte ich die schon ganz gern als <strong>7.5E+6</strong> eingeben dürfen.</p> <p>Möchtest du also vielleicht dein replace() noch entschärfen?</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Home is where my beer is. </div> funktionen in zwei Dateien geht nicht, in einer Datei gehen sie??? Sat, 08 Aug 20 10:55:25 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774307#m1774307 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774307#m1774307 <p>Jetzt möchte ich das Ganze ein wenig aufräume, und es mir für spätere Änderungen leichte machen deshalb lege ich die zwei Funktionen in zwei unterschiedliche Dateien.</p> <p>Dies binde ich hintereinander ein.</p> <p>Doch jetzt geht’s nicht mehr, nur wenn die beiden Funktionen in einer Datei aufgerufen werden??</p> <p>datei 1</p> <pre><code class="block">function getInputAsFloat(element) { return element?parseFloat(element.value.replace(/[^0-9 ]/g, ""))||0:0; } </code></pre> <p>datei 2</p> <pre><code class="block">function rechnen() { let summe_1 = getInputAsFloat(document.formular1.FeldWert1 || 0) + getInputAsFloat(document.formular1.FeldWert2 || 0) + getInputAsFloat(document.formular1.FeldWert3 || 0) ; } </code></pre> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 10:52:47 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774257#m1774257 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774257#m1774257 <p>@@Der Martin</p> <blockquote> <p>Und was ist mit sehr großen oder sehr kleinen Zahlen? Wenn Eingaben in der Größenordnung von Millionen realistisch sind, möchte ich die schon ganz gern als <strong>7.5E+6</strong> eingeben dürfen.</p> </blockquote> <p>TIL dass es die Schreibweise auch in CSS gibt. (Wobei das T für „vor ein paar Tagen/Wochen“ steht).</p> <p>Für einen großen Wert hatte ich in der <a href="https://cssbattle.dev" rel="nofollow noopener noreferrer">CSSBattle</a> vorher <code class="bad">999in</code> geschrieben, aber <code class="good">1e6%</code> ist kürzer.</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 11:18:32 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774258#m1774258 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774258#m1774258 <p>Ja, das stimmt es schaut schöner aus, aber ich war zu erst erstmal froh das es funktioniert. Jetzt auf den zweiten Blick... ja... okey..</p> <p>Das könnte theoretisch im Feld stehen,</p> <p>100 1.000 1.000 € 1.000,10 € 0.54</p> <p>Deshalb das replace(/[^0-9 ]/g, "") und Kommazahlen brauche ich nicht.</p> <p>Aber vielleicht sollte man e snochmal überdenken.</p> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 11:39:43 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774261#m1774261 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774261#m1774261 <blockquote> <pre><code class="block language-javascript"><span class="token keyword">function</span> <span class="token function">getInputAsFloat</span><span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span>element <span class="token operator">?</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span>element<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[^0-9 ]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token number">0</span> <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Sieht doch gleich viel kompakter und klarer aus, finde ich.</p> </blockquote> <p>Mit dem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining" rel="nofollow noopener noreferrer">optional-chaining-operator</a> geht es noch ein klitzekleinses Bisschen einfacher:</p> <pre><code class="block language-javascript"><span class="token keyword">function</span> <span class="token function">getInputAsFloat</span> <span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span>element<span class="token operator">?.</span>value<span class="token operator">?.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\D</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token number">0</span> <span class="token punctuation">}</span> </code></pre> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 12:27:07 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774267#m1774267 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774267#m1774267 <p>Hallo Martin,</p> <p>du hast aber schon gesehen, dass ich ihm diese Aufteilung zum leichteren Debugging empfohlen hatte?</p> <p>Dass man das für Produktionscode wieder zurückbauen kann, ist eine andere Frage. Und ich würde annehmen, dass der V8 JIT die Variablen eh wegoptimiert, also was solls. Der Lesbarkeit hilft es.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 11:34:06 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774259#m1774259 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774259#m1774259 <p>Hallo,</p> <blockquote> <p>Das könnte theoretisch im Feld stehen,</p> <p>100<br> 1.000<br> 1.000 €<br> 1.000,10 €<br> 0.54</p> <p>Deshalb das replace(/[^0-9 ]/g, "") und Kommazahlen brauche ich nicht.</p> </blockquote> <p>ganz sicher? Sieht aus, als würdest du mit Währungsbeträgen hantieren. Und da sind gebrochene Werte etwas völlig Normales. Wenn ich also 119.80 eingebe, wäre ich "not amused", wenn die Software daraus fast 12000 EUR machen würde. Es sei denn, ich soll den Betrag kriegen anstatt bezahlen </p> <p>Allerdings kommt dann das leidige Thema Tausender-Trennzeichen, das sich manche Leute einfach nicht abgewöhnen wollen. Da braucht's dann eine gewisse Heuristik, um zu <s>erkennen</s> erraten, ob der Punkt nun ein Tausender- oder ein Dezimaltrennzeichen sein soll.</p> <blockquote> <p>Aber vielleicht sollte man e snochmal überdenken.</p> </blockquote> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Home is where my beer is. </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 11:52:21 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774262#m1774262 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774262#m1774262 <p>@@Der Martin</p> <blockquote> <p>Wenn ich also 119.80 eingebe, wäre ich "not amused", wenn die Software daraus fast 12000 EUR machen würde. Es sei denn, ich soll den Betrag kriegen anstatt bezahlen </p> <p>Allerdings kommt dann das leidige Thema Tausender-Trennzeichen, das sich manche Leute einfach nicht abgewöhnen wollen. Da braucht's dann eine gewisse Heuristik, um zu <s>erkennen</s> erraten, ob der Punkt nun ein Tausender- oder ein Dezimaltrennzeichen sein soll.</p> </blockquote> <p>Gerade wenn’s um Geld geht, sollte man da nicht raten – aus dem von dir genannten Grund.</p> <p>Da hilft nur, bei der <em>Eingabe</em> keine Tausendertrennzeichen zuzulassen.</p> <p>Bei der <em>Ausgabe</em> kann man Zahlen ja dann formatieren, wenn’s denn sein muss. Statt einen Punkt zu machen, kann man der Eindeutigkeit wegen ein Leerzeichen verwenden – aber ein nicht umbrechendes, sonst <a href="https://twitter.com/yatil/status/900319493473406976" rel="nofollow noopener noreferrer">sieht’s doof aus</a>.</p> <p>Und mit <em>Ausgabe</em> ist hier nicht das Überschreiben des Werts eines <em>Eingabe</em>felds gemeint.</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 12:07:59 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774264#m1774264 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774264#m1774264 <p>@@1unitedpower</p> <blockquote> <p>Mit dem <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining" rel="nofollow noopener noreferrer">optional-chaining-operator</a> geht es noch ein klitzekleinses Bisschen einfacher:</p> </blockquote> <p>Nicht dass ich den nicht schon kannte, ich frag mich bloß, warum ich den bei meiner hiergezeigten <a href="https://codepen.io/gunnarbittersmann/pen/KKzwvqE" rel="noopener noreferrer">Formatierung im Eingabeld</a> nicht verwendet hatte. Jetzt aber</p> <pre><code class="block language-js"> ccInputElement<span class="token punctuation">.</span>value <span class="token operator">=</span> parts<span class="token punctuation">.</span>length <span class="token operator">?</span> parts<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">;</span> </code></pre> <p>ersetzt durch</p> <pre><code class="block language-js"> ccInputElement<span class="token punctuation">.</span>value <span class="token operator">=</span> parts<span class="token operator">?.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">;</span> </code></pre> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 12:17:10 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774265#m1774265 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774265#m1774265 <blockquote> <p>Da hilft nur, bei der Eingabe keine Tausendertrennzeichen zuzulassen.</p> </blockquote> <p>Aber woher soll man wissen, ob es ein Tausender Punkt ist, oder aber nur ein Punkt(Komma)</p> <p>Franz</p> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 12:23:54 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774266#m1774266 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774266#m1774266 <p>Hallo Gunnar,</p> <p>ich kannte den, aber nicht aus JavaScript sondern aus C#. In Java scheinen sie es ja gewohnt umständlich mit der Optional<T> Klasse gelöst zu haben statt kompakt mit einem Operator.</p> <p>Aber damit setzen wir den armen Franz endgültig ins verwahrloste Taxi und jagen ihn quer durch Bayern… (dieser Scherz ist nur für Windows-User verständlich)</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 12:48:13 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774268#m1774268 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774268#m1774268 <p>Hallo Franz,</p> <p>genau das ist der Punkt.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 12:53:24 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774269#m1774269 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774269#m1774269 <p>Hallo Franz,</p> <p>das weißt Du nicht. Zumindest nicht generisch, auf beliebigen Seiten.</p> <p>Es gibt Hinweise.</p> <p>(1) window.navigator.language - liefert Dir die Spracheinstellung im Browser. Aber ist das auch die Sprache, in der die Seite ausgeliefert wird?</p> <p>(2) Es gibt das lang Attribut, das eigentlich auf's html Element gehört und die Sprache kennzeichnet, in der die Seite ausgeliefert wurde. Aber trotz Gunnars Predigten macht das lange<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> nicht jeder. Und du bist auch nicht sicher, dass es lang nur auf dem html Element gibt.</p> <p>Eingabe von Zahlen mit Tausendertrenner UND Dezimalzeichen ist tatsächlich ein Drama.</p> <p>Auf deiner eigenen Seite hast Du bessere Chancen, weil Du da weißt, wie die Sprachauswahl funktioniert. Oder weil Du weißt, dass Du eh nur deutsche Anwender hast, je nach dem. Wenn Du Deine User kennst, oder die dich, dann kann man Vereinbarungen zur Zahleneingabe treffen.</p> <p>Deine direkte Interaktivität hilft den Usern auch dabei, Fehlinterpretationen von Punkt und Komma zu vermeiden.</p> <p>Und auch das rettet Dich nicht, wenn Du jemanden am Gerät sitzen hast, der durch Excel final verpunktet ist und sich weigert, ein Dezimalkomma zu verwenden. Es ist am Besten, Tausendertrennzeichen nicht zu beachten und Punkt UND Komma als Dezimaltrennzeichen zu verwenden. Dann reicht allerdings deine getInputAsFloat nicht mehr hin, dann musst Du Kommas durch Punkte ersetzen und den ganzen Rest entfernen. Das sind zwei Replaces. Nebeneffekt: parseFloat("123.456.789") ergibt 123.456. Das könnte man als GIGO<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> definieren, oder man könnte es in drei Schritten machen:</p> <ol> <li>ist value.replace(/[^.,]/g,"").length > 1 (mehr als 1 Trennzeichen) -> Fehler</li> <li>Ersetze Kommas durch Punkte</li> <li>Ersetze alles außer 0123456789. durch "".</li> </ol> <p>Alternativ zu 3. kannst Du auch mit value.match(/^0-9.]/) prüfen, ob irgendein unerwartetes Zeichen in der Eingabe ist und eine Fehlermeldung anzeigen.</p> <p>Mit der E Notation (1.2E7 für 12 Millionen) würde ich die Eingabe nicht belasten. Das kommt im kaufmännischen Bereich nicht vor.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>sorry for me being punny <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p>Garbage In - Garbage Out <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 13:02:15 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774274#m1774274 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774274#m1774274 <p>Hi,</p> <blockquote> <blockquote> <p>Da hilft nur, bei der Eingabe keine Tausendertrennzeichen zuzulassen.</p> </blockquote> <p>Aber woher soll man wissen, ob es ein Tausender Punkt ist, oder aber nur ein Punkt(Komma)</p> </blockquote> <p>Indem man für die Euro und die Cent getrennte Eingabefelder vorgibt, weiß man, daß Kommata und Punkte im Euro-Feld nicht die Trenner zwischen ganzzahligem und gebrochenem Teil sein können und kann sie restlos entsorgen ...</p> <p>Ist z.B. bei meinem Online-Banking so gemacht.</p> <p>cu,<br> Andreas a/k/a MudGuard</p> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 14:53:41 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774285#m1774285 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774285#m1774285 <p>@@Rolf B</p> <blockquote> <p>Aber damit setzen wir den armen Franz endgültig ins verwahrloste Taxi und jagen ihn quer durch Bayern… (dieser Scherz ist nur für Windows-User verständlich)</p> </blockquote> <p>Nö. Aber nur für Deutschspachige.</p> <p>Für Englischsprachige bespringt ein schneller Fuchs einen lahmen Hund.</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 12:54:48 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774271#m1774271 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774271#m1774271 <p>Hallo Rolf,</p> <blockquote> <p>du hast aber schon gesehen, dass ich ihm diese Aufteilung zum leichteren Debugging empfohlen hatte?</p> </blockquote> <p>das habe ich wohl entweder übersehen oder verdrängt. </p> <blockquote> <p>Dass man das für Produktionscode wieder zurückbauen kann, ist eine andere Frage. Und ich würde annehmen, dass der V8 JIT die Variablen eh wegoptimiert, also was solls. Der Lesbarkeit hilft es.</p> </blockquote> <p>YMMV. Ich tue mich mit dem Lesen (und vor allem Verstehen) deutlich schwerer, wenn etwas, was für mich gedanklich <em>ein</em> Schritt ist, in mehrere kleine Microschritte gesplittet wird.<br> Damit meine ich nicht das Entzerren auf mehrere Zeilen, sondern das Stückeln in mehrere abgeschlossene Anweisungen. Da geht mir leicht der Zusammenhang verloren.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Home is where my beer is. </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 12:53:56 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774270#m1774270 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774270#m1774270 <p>Hallo Matthias,</p> <blockquote> <p>genau das ist der Punkt.</p> </blockquote> <p>oder das Komma,</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 12:59:19 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774272#m1774272 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774272#m1774272 <p>Hi,</p> <blockquote> <p>Mit der E Notation (1.2E7 für 12 Millionen) würde ich die Eingabe nicht belasten. Das kommt im kaufmännischen Bereich nicht vor.</p> </blockquote> <p>im technischen Kontext aber durchaus. Nur dass Ingenieure 12 Millionen eher als 12E6 schreiben würden (oder eben 12M).</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Home is where my beer is. </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 14:50:19 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774284#m1774284 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774284#m1774284 <p>@@Rolf B</p> <blockquote> <p>Mit der E Notation (1.2E7 für 12 Millionen) würde ich die Eingabe nicht belasten. Das kommt im kaufmännischen Bereich nicht vor.</p> </blockquote> <p>Aber hallo‽ Ich schreib doch nicht unzählige Nullen, wenn ich meinen Kontostand angebe.<br> *dagobert duck und weg*</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 12:59:24 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774273#m1774273 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774273#m1774273 <p>Hallo Martin,</p> <blockquote> <p>was für mich gedanklich ein Schritt ist</p> </blockquote> <p>Für Dich...</p> <blockquote> <p>YMMV</p> </blockquote> <p>Eben. Aber Du hast Siebenmeilenstiefel und rennst Marathon ohne ins Schwitzen zu kommen, und Franz sitzt noch mit Badeschlappen in seinem komplett verwahrlostes Taxi.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 13:57:17 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774275#m1774275 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774275#m1774275 <p>Hallo Andreas,</p> <blockquote> <blockquote> <p>Aber woher soll man wissen, ob es ein Tausender Punkt ist, oder aber nur ein Punkt(Komma)</p> </blockquote> <p>Indem man für die Euro und die Cent getrennte Eingabefelder vorgibt, weiß man, daß Kommata und Punkte im Euro-Feld nicht die Trenner zwischen ganzzahligem und gebrochenem Teil sein können und kann sie restlos entsorgen ...</p> <p>Ist z.B. bei meinem Online-Banking so gemacht.</p> </blockquote> <p>und wie funktioniert dann C&P von der Rechnung in die Überweisung?</p> <p>Gruß<br> Jürgen</p> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 14:09:07 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774276#m1774276 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774276#m1774276 <p>Hallo JürgenB,</p> <blockquote> <p>und wie funktioniert dann C&P von der Rechnung in die Überweisung?</p> </blockquote> <p><aside role="scherz">Dafür hat die Bank bestimmt ein Plugin für den Internet Explorer bereitgestellt.</aside></p> <p>Also ganz ehrlich, diese Eingabeform ist mir noch nie untergekommen, und es ist eigentlich eine Kapitulation vor der Situation...</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 14:17:00 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774277#m1774277 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774277#m1774277 <p>Hallo Rolf,</p> <blockquote> <blockquote> <p>und wie funktioniert dann C&P von der Rechnung in die Überweisung?</p> </blockquote> </blockquote> <p>…</p> <blockquote> <p>Also ganz ehrlich, diese Eingabeform ist mir noch nie untergekommen, und es ist eigentlich eine Kapitulation vor der Situation...</p> </blockquote> <p>für mich ist das die normale. Warum soll ich etwas vom Bildschirm, an dem ich sitze, abtippen.</p> <p>Gruß<br> Jürgen</p> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 14:22:02 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774278#m1774278 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774278#m1774278 <p>Hallo JürgenB,</p> <p>hä? Witzbold . Ich hätte wohl mehr zitieren müssen...</p> <p>Die Kapitulation ist die Trennung in € und ct, nicht das C&P</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 14:22:59 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774279#m1774279 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774279#m1774279 <p>Hallo Jürgen,</p> <blockquote> <blockquote> <blockquote> <p>und wie funktioniert dann C&P von der Rechnung in die Überweisung?</p> </blockquote> </blockquote> </blockquote> <p>nicht. ;-)</p> <blockquote> <blockquote> <p>Also ganz ehrlich, diese Eingabeform ist mir noch nie untergekommen, und es ist eigentlich eine Kapitulation vor der Situation...</p> </blockquote> <p>für mich ist das die normale. Warum soll ich etwas vom Bildschirm, an dem ich sitze, abtippen.</p> </blockquote> <p>Ähm, Rolf meinte mit <em>Eingabeform</em> wohl eher die getrennten Eingabefelder für Euro und Cent. Dass die suboptimal ist, finde ich auch. Nicht nur wegen des nicht funktionierenden C&P.</p> <p>Aber ich habe das auch schon bei zahlreichen Formularen gesehen - sogar Print-Formularen.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Home is where my beer is. </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 15:02:02 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774288#m1774288 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774288#m1774288 <p>Hallo Rolf,</p> <blockquote> <p>Die Kapitulation ist die Trennung in € und ct, nicht das C&P</p> </blockquote> <p>ach so </p> <p>Gruß<br> Jürgen</p> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 15:01:17 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774287#m1774287 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774287#m1774287 <p>Hallo Gunnar,</p> <blockquote> <p>*dagobert duck und weg*</p> </blockquote> <p>da hast du noch ein ganz anderes Problem:</p> <p>15 Stellen Double-Precision 4 Stellen hinter dem Komma 100stel Cent</p> <p>da bleiben noch 11 Stellen vor dem Komma. Ob es da wohl einen Overflow-Error gibt?</p> <p>Gruß<br> Jürgen</p> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 14:56:33 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774286#m1774286 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774286#m1774286 <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>Für Englischsprachige bespringt ein schneller Fuchs einen lahmen Hund.</p> </blockquote> <p>over, not on. Und faul.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 15:25:27 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774291#m1774291 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774291#m1774291 <p>@@Gunnar Bittersmann</p> <blockquote> <blockquote> <p>Aber damit setzen wir den armen Franz endgültig ins verwahrloste Taxi und jagen ihn quer durch Bayern…</p> </blockquote> <p>Für Englischsprachige bespringt ein schneller Fuchs einen lahmen Hund.</p> </blockquote> <p>Und für alles gibt’s ein Fremdwort: <a href="https://de.wikipedia.org/wiki/Pangramm" rel="nofollow noopener noreferrer">Pangramm</a>.</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 15:19:32 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774290#m1774290 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774290#m1774290 <p>@@Matthias Apsel</p> <blockquote> <blockquote> <p>Für Englischsprachige bespringt ein schneller Fuchs einen lahmen Hund.</p> </blockquote> <p>over, not on.</p> </blockquote> <p>Das ist nicht witzig.</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 17:40:16 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774292#m1774292 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774292#m1774292 <p>Hallo Gunnar Bittersmann,</p> <blockquote> <blockquote> <blockquote> <p>Für Englischsprachige bespringt ein schneller Fuchs einen lahmen Hund.</p> </blockquote> <p>over, not on.</p> </blockquote> <p>Das ist nicht witzig.</p> </blockquote> <p>Warum? Was hab ich nicht verstanden?</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> Script trotzdem ausführen, auch wenn Variable nicht da ist, nicht existiert! Fri, 07 Aug 20 18:12:55 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774293#m1774293 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774293#m1774293 <p>Hallo Matthias,</p> <blockquote> <blockquote> <blockquote> <blockquote> <p>Für Englischsprachige bespringt ein schneller Fuchs einen lahmen Hund.</p> </blockquote> <p>over, not on.</p> </blockquote> <p>Das ist nicht witzig.</p> </blockquote> <p>Warum? Was hab ich nicht verstanden?</p> </blockquote> <p>was immer es ist: Ich hab's auch nicht verstanden.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Home is where my beer is. </div> funktionen in zwei Dateien geht nicht, in einer Datei gehen sie??? Sat, 08 Aug 20 11:43:50 Z https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774308#m1774308 https://forum.selfhtml.org/self/2020/aug/04/javascript-ergebnis-in-input-feld-zahl-mittels-css-formatieren/1774308#m1774308 <p>Hallo Franz,</p> <p>doch, das muss gehen. Im gezeigten Script liegt der Fehler nicht, höchstens in der Art der Einbindung.</p> <p>Du musst schon spezielle Maßnahmen ergreifen, damit eine Funktion nicht global sichtbar wird. Von diesen Maßnahmen weißt Du mutmaßlich überhaupt nichts und hast sie darum auch nicht ergriffen.</p> <p>Guck in die Entwicklerwerkzeuge. In die Konsole und den Netzwerktrace. Gibt es Ladefehler? Gibt es JavaScript-Fehlermeldungen?</p> <p>Sehen deine beiden .js Dateien genau so aus wie die beiden Codeblöcke da oben? Oder ist da noch mehr? Bindest Du die rechnen-Funktion immer noch über <code>onkeyup="rechnen()"</code> an? (was übrigens falsch wäre, das sollte `oninput="rechnen()" sein um auch ein Copy+Paste mit der Maus zu unterstützen)</p> <hr> <p>Das Aufteilen von Code in viele kleine Dateien ist für eine Browserseite allerdings ein zweischneidiges Schwert. Wenn Du getInputAsFloat von vielen Stellen aus benutzt, dann kann es sinnvoll sein, sie in einer zentralen Toolbox-Datei unterzubringen. Wenn zwei Funktionen dagegen wirklich zusammengehören, also z.B. die Funktion x <strong>nur</strong> von der Funktion y aufgerufen wird, dann können die beiden auch in einer Datei liegen.</p> <p>Pro:</p> <ul> <li>klare Strukturierung</li> <li>keine Riesendateien im Editor</li> </ul> <p>Contra:</p> <ul> <li>Es kostet VIEL Zeit, diese Häppchen zu laden.</li> <li>Man muss im Editor häufig zu einer anderen Datei wechseln.</li> </ul> <p>Profi-Entwickler machen es so, dass sie Funktionen thematisch zu .js Dateien gruppieren und während der Entwicklung diese Dateien auch einzeln laden. Für das Deployment auf den Produktionsserver werden sie aber mittels eines speziellen Tools gebündelt. D.h. alle Scripte, die auf einer Seite geladen werden, werden aneinander gehängt. Ein weiteres Tool kann sie dann auch noch minifizieren, d.h. lange Variablennamen in kurze umwandeln und bestimmte Formulierungen im Code kürzer machen. Das Ergebnis ist total hässlich und unlesbar, weshalb man solche Tools auch „uglifier“ nenne.</p> <p>Wenn man nur zwei bis fünf Funktionen hat, sollte man sich um Minifizierung und Codeverteilung überhaupt keine Gedanken machen. Einfach in eine Datei und gut ist. Wenn das Projekt größer wird, sollte man aber - nicht zu spät - mit Strukturierung und Modularisierung anfangen. Leider beherrscht der Internet Explorer die mit ECMAScript 6 eingeführte native Modularisierung nicht (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules" rel="nofollow noopener noreferrer">Artikel bei Mozilla</a>), wenn Du den also unterstützen willst, brauchst Du Tools wie require.js als reiner Module Loader, oder große Transpiler wie Babel oder TypeScript; die können das als Nebeneffekt, haben aber erstmal eine steile Lernkurve.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div>