@@Gunnar Bittersmann > > Meine Frage ist, wie kann ich den Preis erhöhen bzw. senken wenn ich die Zahl ändere. > > Dazu musst du > > 1. [auf das `change`-Event des Eingabefeldes lauschen](http://molily.de/js/event-handling-fortgeschritten.html#dom-events). > 2. Wenn das feuert, [dessen aktuellen Wert auslesen](https://wiki.selfhtml.org/wiki/JavaScript/Objekte/DOM/document/forms/elements), > 3. die Berechnung durchführen (Den Preis eines Produkts musst du an geeigneter Stelle ablegen. Da, wo die Berechnung durchgeführt wird, ist keine geeignete Stelle.) > 4. und das Ergebnis in das vorgesehene Element schreiben. [`output`](http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-output-element) wäre der passende Elementtyp dafür, nicht `div`; dann geht das auch genauso wie beim Eingabeelement. Und nicht zu vergessen: 5\. dafür sorgen, dass AT[^1] die Änderungen auch mitbekommt; dass bspw. ein Screenreader den Betrag bei jeder Änderung erneut vorliest. Mit `aria-live="polite"` fürs `output`-Element und entsprechendem `aria-controls`-Attribut fürs `input`-Element sollte das gewährleistet sein. → MDN: [ARIA Live Regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) [So in etwa.](http://codepen.io/gunnarbittersmann/pen/GoKLEp?editors=101) [^1]: assistive Technologie LLAP 🖖 -- „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“ „Hat auf dem Forum herumgelungert …“ (Wachen in Asterix 36: Der Papyrus des Cäsar)

@@Gunnar Bittersmann > > Meine Frage ist, wie kann ich den Preis erhöhen bzw. senken wenn ich die Zahl ändere. > > Dazu musst du > > 1. [auf das `change`-Event des Eingabefeldes lauschen](http://molily.de/js/event-handling-fortgeschritten.html#dom-events). > 2. Wenn das feuert, [dessen aktuellen Wert auslesen](https://wiki.selfhtml.org/wiki/JavaScript/Objekte/DOM/document/forms/elements), > 3. die Berechnung durchführen (Den Preis eines Produkts musst du an geeigneter Stelle ablegen. Da, wo die Berechnung durchgeführt wird, ist keine geeignete Stelle.) > 4. und das Ergebnis in das vorgesehene Element schreiben. [`output`](http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-output-element) wäre der passende Elementtyp dafür, nicht `div`; dann geht das auch genauso wie beim Eingabeelement. Und nicht zu vergessen: 5\. dafür sorgen, dass AT[^1] die Änderungen auch mitbekommt; dass bspw. ein Screenreader den Betrag bei jeder Änderung erneut vorliest. Mit `aria-live="polite"` fürs `output`-Element und entsprechendem `aria-controls`-Attribut fürs `input`-Element sollte das gewährleistet sein. → MDN: [ARIA Live Regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) [So in etwa.](http://codepen.io/gunnarbittersmann/pen/GoKLEp?editors=101) [^1]: assistive Technologie LLAP 🖖 -- „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“ „Hat auf dem Forum herumgelungert …“ (Wachen in Asterix 36: Der Papyrus des Cäsar)