@@Sana > Es funktioniert, das vorab. Aber ist es auch so richtig? Nein. > ~~~html, bad > <form name="formular" action=""> > ~~~ Der Wert des `action`-Attributs darf nicht leer sein. Du willst kein `action`-Attribut setzen. > ~~~html, bad > <input type="text" name="input1" class="form-control" placeholder="0" onkeyup="calculate()"/> > ~~~ Dem Eingabefeld fehlt seine [Beschriftung (`label`)](https://wiki.selfhtml.org/wiki/HTML/Formulare/label). Auch wenn sehenden Nutzern die Funktion des Feldes klar ist, sollte das Ding dennoch eine Beschriftung haben – diese kann dann [visuell versteckt](https://a11yproject.com/posts/how-to-hide-content/) sein. Es gibt andere Eingabeformen als Keyboard. `keyup`{:.bad} ist nicht das Event, auf das zu lauschen ist, sondern `input`{:.good}. Eventhandler sollten nicht im HTML notiert werden (`on…`{:.bad}-Attribute), sondern im JavaScript (`EventTarget.addEventListener()`{:.language-js.good}). Man braucht auch nicht einen Eventhandler für jedes Eingabefeld, sondern nur einen fürs Formular (**event delegation**{:@en}). > ~~~html, bad > <span class="form-control" id="output">000</span> > ~~~ Zur Ausgabe gibt es ein [entsprechendes HTML-Element](https://wiki.selfhtml.org/wiki/HTML/Formulare/Ergebnisausgabe) (Ich musste das Wiki erstmal berichtigen, bevor ich das verlinken konnte. Vielleicht kann noch jemand drüberschauen, ob die Formulierung so verständlich ist.) > ~~~js > input1 = parseFloat( document.formular.input1.value.replace(/,/ , ".") ); > ~~~ Es ist nicht nötig, das Komma in einen Punkt umzuwandeln. Für Eingabefelder vom Typ `number` gibt’s da [`HTMLInputElement.valueAsNumber`{:.language-js}](https://html.spec.whatwg.org/multipage/input.html#dom-input-valueasnumber). > ~~~js, bad > if (typeof(input1)=="number" && input1+""=="NaN") { var input1 =0; } > ~~~ Zum Vorbelegen von Werten kann man in JavaScript den [`||`{:.language-js}-Operator](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Logische_Operatoren) nutzen. > ~~~js > document.getElementById("output").innerHTML= (input1 + input2 + input3).toString().replace(/\./ , ","); > ~~~ Es ist nicht nötig, den Punkt durch Komma zu ersetzen. Das erledigt [`Number.toLocaleString()`{:.language-js}](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString). Das Ganze kannst du dir bei [diesem Addierer](https://codepen.io/gunnarbittersmann/pen/vYOvmGo) ansehen. 🖖 Stay hard! Stay hungry! Stay alive! **Stay home!** {:@en} -- Vielen Eltern dämmert beim Home-Schooling so langsam die Erkenntnis: Lehrer ist wohl doch ein regelrechter Beruf! ([@heuteshow](https://twitter.com/heuteshow/status/1241117074191273997))

@@Sana > Es funktioniert, das vorab. Aber ist es auch so richtig? Nein. > ~~~html, bad > <form name="formular" action=""> > ~~~ Der Wert des `action`-Attributs darf nicht leer sein. Du willst kein `action`-Attribut setzen. > ~~~html, bad > <input type="text" name="input1" class="form-control" placeholder="0" onkeyup="calculate()"/> > ~~~ Dem Eingabefeld fehlt seine [Beschriftung (`label`)](https://wiki.selfhtml.org/wiki/HTML/Formulare/label). Auch wenn sehenden Nutzern die Funktion des Feldes klar ist, sollte das Ding dennoch eine Beschriftung haben – diese kann dan [visuell versteckt](https://a11yproject.com/posts/how-to-hide-content/) sein. Es gibt andere Eingabeformen als Keyboard. `keyup`{:.bad} ist nicht das Event, auf das zu Lauschen ist, sondern `input`{:.good}. Eventhandler sollten nicht im HTML notiert werden (`on…`{:.bad}-Attribute), sondern im JavaScript (`addEventListener`{:.language-js.good}). Man braucht auch nicht einen Eventhandler für jedes Eingabefeld, sondern nur einen fürs Formular (**event delegation**{:@en}). > ~~~html, bad > <span class="form-control" id="output">000</span> > ~~~ Zur Ausgabe gibt es ein [ensprechendes HTML-Element](https://wiki.selfhtml.org/wiki/HTML/Formulare/Ergebnisausgabe) (Ich musste das Wiki erstmal berichtigen, bevor ich das verlinken konnte. Vielleicht kann noch jemand drüberschauen, ob die Formulierung so verständlich ist.) > ~~~js > input1 = parseFloat( document.formular.input1.value.replace(/,/ , ".") ); > ~~~ Es ist nicht nötig, das Komma in einen Punkt umzuwandeln. Für Eingabefelder vom Typ `number` gibt’s da [`HTMLInputElement.valueAsNumber`{:.language-js}](https://html.spec.whatwg.org/multipage/input.html#dom-input-valueasnumber). > ~~~js, bad > if (typeof(input1)=="number" && input1+""=="NaN") { var input1 =0; } > ~~~ Zum Vorbelegen von Werten kann man in JavaScript den [`||`{:.language-js}-Operator](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Logische_Operatoren) nutzen. > ~~~js > document.getElementById("output").innerHTML= (input1 + input2 + input3).toString().replace(/\./ , ","); > ~~~ Es ist nicht nötig, den Punkt durch Komma zu ersetzen. Das erledigt [`Number.toLocaleString()`{:.language-js}](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString). Das Ganze kannst du dir bei [diesem Addierer](https://codepen.io/gunnarbittersmann/pen/vYOvmGo) ansehen. 🖖 Stay hard! Stay hungry! Stay alive! **Stay home!** {:@en} -- Vielen Eltern dämmert beim Home-Schooling so langsam die Erkenntnis: Lehrer ist wohl doch ein regelrechter Beruf! ([@heuteshow](https://twitter.com/heuteshow/status/1241117074191273997))