Jochen: Preis live aktualisieren?

0 56

Preis live aktualisieren?

Jochen
  • html
  • javascript
  1. 0
    Gunnar Bittersmann
    1. 0
      Jochen
      1. 0
        JürgenB
        1. 0
          Jörg Reinholz
          1. 0
            Der Martin
            1. 0
              Jörg Reinholz
              1. 0
                Der Martin
                1. 0
                  unknown
                  1. 0
                    JürgenB
                    1. 1
                      Jörg Reinholz
            2. 0
              Gunnar Bittersmann
          2. 0
            JürgenB
            1. 0
              Jörg Reinholz
              1. 0
                JürgenB
                1. 0
                  Jörg Reinholz
                  1. 0
                    JürgenB
                  2. 0
                    Gunnar Bittersmann
                    1. 0
                      Jörg Reinholz
                      1. 0
                        Der Martin
                        1. 0
                          Christian Kruse
                      2. 1
                        Gunnar Bittersmann
                        1. 0
                          JürgenB
                          1. 0
                            Gunnar Bittersmann
                        2. 0
                          Jörg Reinholz
                2. 0
                  Matthias Apsel
                  1. 0
                    JürgenB
      2. 0
        Jörg Reinholz
        1. 0
          Jochen
          1. 0
            Jörg Reinholz
            1. 0
              Tabellenkalk
              1. 0
                Jörg Reinholz
            2. 0
              Der Martin
              1. 0
                Jörg Reinholz
            3. 0
              Gunnar Bittersmann
              1. 0
                Jörg Reinholz
          2. 0

            Jochen: Vergackeierst Du uns?

            Jörg Reinholz
            1. 0
              Jochen
              1. 0
                Jörg Reinholz
                1. 0

                  Bitte keine Rechtsberatung!

                  Jochen
                  1. 2
                    Tabellenkalk
                    1. 0
                      Jochen
                      1. 0

                        Sockenpuppenalarm!

                        Jörg Reinholz
                  2. 0
                    Jörg Reinholz
      3. 1
        Gunnar Bittersmann
        1. 0
          Jochen
          1. 0
            Gunnar Bittersmann
        2. 0
          JürgenB
          1. 0
            Jörg Reinholz
            1. 0
              JürgenB
          2. 0
            Gunnar Bittersmann
            1. 0
              JürgenB
              1. 0
                Gunnar Bittersmann
                1. 0
                  Gunnar Bittersmann
            2. 0
              Jörg Reinholz
        3. 0

          ARIA Live Regions

          Gunnar Bittersmann
          • barrierefreiheit
          • html
          • javascript

Hallo,

ist es möglich wenn ich in meinem <input> Feld die Zahl erhöhe sich gleichzeitig der Preis aktualisiert? Ich muss dazu sagen meine JavaScript Kenntnisse sind fast 0.

<div class="price">27,90 €</div>

<form name="form_price" method="post">
   <input type="number" min="1" name="" id="" value="" >
   <button id="btn"><span class="cart"></span> Kaufen</button>
</form>
  1. @@Jochen

    ist es möglich wenn ich in meinem <input> Feld die Zahl erhöhe sich gleichzeitig der Preis aktualisiert?

    Ja, das ist es.

    Ich muss dazu sagen meine JavaScript Kenntnisse sind fast 0.

    Das allerdings ist eine denkbar ungünstige Voraussetzung, dein Vorhaben umzusetzen.

    Wenn du aber konkrete Fragen hast, wird dir hier gern weitergeholfen.

    LLAP 🖖

    --
    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
    „Hat auf dem Forum herumgelungert …“
    (Wachen in Asterix 36: Der Papyrus des Cäsar)
    1. Hallo,

      Ja, das ist es.

      sehr schön.

      Ich muss dazu sagen meine JavaScript Kenntnisse sind fast 0.

      Das allerdings ist eine denkbar ungünstige Voraussetzung, dein Vorhaben umzusetzen.

      Wenn du aber konkrete Fragen hast, wird dir hier gern weitergeholfen.

      Meine Frage ist, wie kann ich den Preis erhöhen bzw. senken wenn ich die Zahl ändere. Zwar kann ich kaum JavaScript aber dieses muss ja nicht heißen, dass ich es nicht hinbekomme. Nach was müsste ich denn bei Google suchen? Wie heißt so ein Vorhaben?

      1. Hallo,

        … Nach was müsste ich denn bei Google suchen? Wie heißt so ein Vorhaben?

        Ereignisverarbeitung, Eventhandling, Eventlistener, ...

        Events

        Noch ein Tipp aus eigener Erfahrung: Das Change-Ereignis tritt bei Eingaben in das Inputfeld erst ein, wenn man mit der Maus "woandershin" klickt.

        Gruß Jürgen

        1. Moin!

          Noch ein Tipp aus eigener Erfahrung: Das Change-Ereignis tritt bei Eingaben in das Inputfeld erst ein, wenn man mit der Maus "woandershin" klickt.

          onkeyup feuert hier im richtigen Augeblick.

          Jörg Reinholz

          1. Hallo,

            Das Change-Ereignis tritt bei Eingaben in das Inputfeld erst ein, wenn man mit der Maus "woandershin" klickt.

            richtiger: Wenn das input-Feld nach einer Änderung den Focus verliert. Da muss nicht unbedingt die Maus im Spiel sein; das kann auch die Tab-Taste sein, die das nächste Feld anspringt, oder die Enter-Taste, die das Formular absendet (wobei es im dem Moment wahrscheinlich nicht mehr interessant ist, noch Seiteninhalte zu aktualisieren).

            onkeyup feuert hier im richtigen Augeblick.

            Ja, versagt aber in ein paar wenigen Ausnahmefällen. Zum Beispiel wenn man per Rechtsklick und "Paste" im Kontextmenü mit der Maus etwas einfügt. Aber das ist vermutlich vernachlässigbar.

            Bliebe als weitere Möglichkeit noch ein zeitgesteuertes Aktualisieren des gewünschten Anzeigefeldes (setTimeout() oder setInterval(), Einzelpreis und Anzahl stur lesen, multiplizieren, Ergebnis ins Ausgabefeld schreiben). Wirklich elegant ist das natürlich auch nicht.

            So long,
             Martin

            1. Moin!

              Bliebe als weitere Möglichkeit noch ein zeitgesteuertes Aktualisieren des gewünschten Anzeigefeldes (setTimeout() oder setInterval(), Einzelpreis und Anzahl stur lesen, multiplizieren, Ergebnis ins Ausgabefeld schreiben). Wirklich elegant ist das natürlich auch nicht.

              Geringfügig eleganter:

              Aller 100 Millisekunden das Feld lesen, mit dem gespeicherten alten Wert vergleichen und, wenn unterschiedlich: multiplizieren, Ergebnis ins Ausgabefeld schreiben...

              Jörg Reinholz

              1. Hallo,

                Bliebe als weitere Möglichkeit [...] Wirklich elegant ist das natürlich auch nicht.

                Geringfügig eleganter:

                Aller 100 Millisekunden das Feld lesen, mit dem gespeicherten alten Wert vergleichen und, wenn unterschiedlich: multiplizieren, Ergebnis ins Ausgabefeld schreiben...

                okay, gute Idee. Der Punkt geht an dich. :-)

                Ciao,
                 Martin

                1. Oder man nimmt https://developer.mozilla.org/en-US/docs/Web/Events/input

                  1. Hallo,

                    Oder man nimmt https://developer.mozilla.org/en-US/docs/Web/Events/input

                    der feuert aber doch auch bei jeder Änderung, also bei einer 20-stelligen Zahl 20 mal?

                    Gruß Jürgen

                    1. Moin!

                      der feuert aber doch auch bei jeder Änderung, also bei einer 20-stelligen Zahl 20 mal?

                      Wo ist das Problem?

                      Der EP wäre 5 €.

                      1. Der Benutzer tippt eine 2 und als GP erscheint 10 €. Stimmt.
                      2. Der Benutzer tippt weiter eine 2 und als GP erscheint 110 €. Stimmt.
                      3. Der Benutzer löscht eine zwei und als GP erscheint 10 €. Stimmt.
                      4. Der Benutzer tippt die 0 ein und als GP erscheint 100. Stimmt.

                      Mit change / onchange:

                      1. Der Benutzer tippt eine 2 und als GP erscheint 0 €. Stimmt nicht.
                      2. Der Benutzer tippt weiter eine 2 und als GP erscheint 0 €. Stimmt nicht.
                      3. Der Benutzer löscht eine zwei und als GP erscheint 0 €. Stimmt nicht.
                      4. Der Benutzer tippt die 0 ein und als GP erscheint 0. Stimmt nicht.

                      Der Benutzer muss nochmal agieren um den Preis zu sehen. Krass und unnötig umständlich!

                      Jörg Reinholz

            2. @@Der Martin

              onkeyup feuert hier im richtigen Augeblick.

              Nein.

              Ja, versagt aber in ein paar wenigen Ausnahmefällen. […] Aber das ist vermutlich vernachlässigbar.

              Nein.

              Bliebe als weitere Möglichkeit noch ein zeitgesteuertes Aktualisieren des gewünschten Anzeigefeldes (setTimeout() oder setInterval(), Einzelpreis und Anzahl stur lesen, multiplizieren, Ergebnis ins Ausgabefeld schreiben). Wirklich elegant ist das natürlich auch nicht.

              Nein, wirklich nicht.

              LLAP 🖖

              --
              „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
              „Hat auf dem Forum herumgelungert …“
              (Wachen in Asterix 36: Der Papyrus des Cäsar)
          2. Hallo Jörg,

            onkeyup feuert hier im richtigen Augeblick.

            wenn bei einer 20-stelligen Zahl nach jeder Ziffer gerechnet werden soll, dann stimme ich zu.

            Gruß Jürgen

            1. Moin!

              onkeyup feuert hier im richtigen Augeblick.

              wenn bei einer 20-stelligen Zahl nach jeder Ziffer gerechnet werden soll, dann stimme ich zu.

              Wie hätte der Herr es denn gerne?

              • onkeyup: immer wenn mit der Tastatur was eingetragen oder gelöscht wurde.
              • onchange: wenn das Feld den Fokus verliert und der Inhalt geändert wurde.
              • oninput: funktioniert (noch) nicht immer (z.B. beim Löschen eines Zeichens)

              Was davon ideal ist bestimmt natürlich der Benutzer. Denke über den nach.

              Jörg Reinholz

              1. Hallo Jörg,

                Wie hätte der Herr es denn gerne?

                ich habe mich hier für einen funktionslosen OK-Knopf entschieden, also so eine Art AnyKey.

                Gruß Jürgen

                1. Moin!

                  Hallo Jörg,

                  Wie hätte der Herr es denn gerne?

                  ich habe mich hier für einen funktionslosen OK-Knopf entschieden, also so eine Art AnyKey.

                  ich fand:

                  for(var i=0;i<inpwerte.length;i++) inpwerte[i].onchange = rechne;
                  

                  Das hat also mit dem "funktionslosen OK-Knopf" nicht viel zu tun.

                  Das würde ich umscheiben zu:

                  for (var i=0;i<inpwerte.length;i++) {
                     inpwerte[i].onchange = rechne;
                     inpwerte[i].onkeyup = rechne;
                  }
                  

                  ... und den OK-Knopf dafür verwenden, die Berechnung serverseitig durchzuführen. JS kann nämlich abgestellt sein.

                  Jörg Reinholz

                  1. Hallo Jörg,

                    ich habe mich hier für einen funktionslosen OK-Knopf entschieden, also so eine Art AnyKey.

                    ich fand:

                    for(var i=0;i<inpwerte.length;i++) inpwerte[i].onchange = rechne;
                    

                    das setzt die Events für die Eingabefelder.

                    Das hat also mit dem "funktionslosen OK-Knopf" nicht viel zu tun.

                    Das ist ja auch kein Knopf. Der OK-Knopf macht wirklich nichts. Man kann hinklicken, wo man will, eben statt AnyKey ein AnyClick. Die Eingabefelder müssen nur den Focus verlieren.

                    Das würde ich umscheiben zu:

                    Das ist deine Meinung. Ich finde es nicht gut, wenn gerechnet wird bevor die Eingabe abgeschlossen ist.

                    ... und den OK-Knopf dafür verwenden, die Berechnung serverseitig durchzuführen. JS kann nämlich abgestellt sein.

                    Ich habe keinen Server.

                    Gruß Jürgen

                  2. @@Jörg Reinholz

                    Das würde ich umscheiben zu:

                    for (var i=0;i<inpwerte.length;i++) {
                       inpwerte[i].onchange = rechne;
                       inpwerte[i].onkeyup = rechne;
                    }
                    

                    Die Forumsoftware sollte Postings, die die Zeichenkette .on enthalten, abweisen.

                    LLAP 🖖

                    --
                    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                    „Hat auf dem Forum herumgelungert …“
                    (Wachen in Asterix 36: Der Papyrus des Cäsar)
                    1. Moin!

                      Die Forumsoftware sollte Postings, die die Zeichenkette .on enthalten, abweisen.

                      Vielleicht willst Du das begründen? Das wäre auch für mich hilfreich.

                      Element.onSonstwas="javascript" funktioniert - ich lasse hier mal das "prächtig" weg, weil Du mich (und andere interessierte) sicherlich gleich aufklären wirst, warum "prächtig" nicht zutreffend ist.

                      addEvenetListener scheint mir bis zur Aufklärung zu viel Schreibarbeit zu sein.

                      Jörg Reinholz

                      1. Hallo,

                        Die Forumsoftware sollte Postings, die die Zeichenkette .on enthalten, abweisen.

                        Vielleicht willst Du das begründen? Das wäre auch für mich hilfreich.

                        Gunnar möchte, dass Dinge, die er meidet, auch andere Menschen gar nicht erst sehen sollen.

                        Element.onSonstwas="javascript" funktioniert - ich lasse hier mal das "prächtig" weg, weil Du mich (und andere interessierte) sicherlich gleich aufklären wirst, warum "prächtig" nicht zutreffend ist.

                        Einen Grund kann ich dir nennen: Modularität.
                        Es ist mit der Notation element.onevent nicht (oder nur mit erheblicher Frickelei) möglich, einen Eventhandler zu registrieren, ohne einen eventuell vorher gesetzten unwirksam zu machen. Das kann für ein Projekt, in dem unterschiedliche Javascript-Module friedlich koexistieren sollen, schon ein überzeugender Grund sein.

                        Aber ich bin gespannt, ob Gunnar noch andere hat.

                        addEvenetListener scheint mir bis zur Aufklärung zu viel Schreibarbeit zu sein.

                        Hmm. Ich finde, im Hinblick auf die Schreibarbeit nehmen sich beide Versionen nicht viel.

                        So long,
                         Martin

                        1. Hallo Martin,

                          Die Forumsoftware sollte Postings, die die Zeichenkette .on enthalten, abweisen.

                          Vielleicht willst Du das begründen? Das wäre auch für mich hilfreich.

                          Gunnar möchte, dass Dinge, die er meidet, auch andere Menschen gar nicht erst sehen sollen.

                          Insgesamt würde ich dir hier zustimmen, aber die Verwendung von on-Eventlistenern ist wirklich nicht zu empfehlen. Es gehört zu den Best Practices, dass nicht zu tun.

                          Aber ich bin gespannt, ob Gunnar noch andere hat.

                          Dass man damit granularer arbeiten kann, hat Gunnar ja bereits gesagt. Aber weiterhin kann man damit auch gezielter arbeiten, man kann z.B. auch Event-Capturing einschalten oder auf DOM-Elementen arbeiten, die keine HTML-Elemente sind.

                          addEvenetListener scheint mir bis zur Aufklärung zu viel Schreibarbeit zu sein.

                          Hmm. Ich finde, im Hinblick auf die Schreibarbeit nehmen sich beide Versionen nicht viel.

                          Vor allem ist Schreibarbeit ein wirklich schlechtes Argument.

                          LG,
                          CK

                      2. @@Jörg Reinholz

                        Element.onSonstwas="javascript" funktioniert - ich lasse hier mal das "prächtig" weg, weil Du mich (und andere interessierte) sicherlich gleich aufklären wirst, warum "prächtig" nicht zutreffend ist.

                        Dass sich mehrere Angaben von .on… gegenseitig überschreiben, sollte Grund genug sein.

                        Vielleicht möchte man Event-Listener auch gezielt wieder entfernen. Bei addEventListener() mit removeEventListener() kein Problem; bei .on… aber doch.

                        LLAP 🖖

                        --
                        „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                        „Hat auf dem Forum herumgelungert …“
                        (Wachen in Asterix 36: Der Papyrus des Cäsar)
                        1. Hallo Gunnar,

                          Element.onSonstwas="javascript" funktioniert - ich lasse hier mal das "prächtig" weg, weil Du mich (und andere interessierte) sicherlich gleich aufklären wirst, warum "prächtig" nicht zutreffend ist.

                          Dass sich mehrere Angaben von .on… gegenseitig überschreiben, sollte Grund genug sein.

                          oder im Umkehrschluss, wenn man alle anderen loswerden will, nimmt man on… :)

                          Vielleicht möchte man Event-Listener auch gezielt wieder entfernen. Bei addEventListener() mit removeEventListener() kein Problem; bei .on… aber doch.

                          oder Kahlschlag mit ele.on… = null; :)

                          Gruß Jürgen

                          1. @@JürgenB

                            Vielleicht möchte man Event-Listener auch gezielt wieder entfernen. Bei addEventListener() mit removeEventListener() kein Problem; bei .on… aber doch.

                            oder Kahlschlag mit ele.on… = null; :)

                            Zitiere Entferne sinnvoll, nicht alles. ;-)

                            LLAP 🖖

                            --
                            „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                            „Hat auf dem Forum herumgelungert …“
                            (Wachen in Asterix 36: Der Papyrus des Cäsar)
                        2. Moin!

                          Danke. Mal wieder was brauchbares gelernt. Ich mache ja mehr im serverseitigen Backend, habe a) mit dem Zeug vorigen Jahrtausend angefangen und b) vor dem Problem noch nicht gestanden. Aber ich gehe damit mal "spielen" - damit ich es im Hauptspeicher habe, wenn ich removeEventListener() brauche.

                          Jörg Reinholz

                2. Hallo JürgenB,

                  ich habe mich hier für einen funktionslosen OK-Knopf entschieden, also so eine Art AnyKey.

                  Dort könntest du die input-Felder noch begrenzen. Die Wochen in beide Richtungen. Dann brauchst du auch kein alert.

                  Bis demnächst
                  Matthias

                  --
                  Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
                  1. Hallo Matthias,

                    Dort könntest du die input-Felder noch begrenzen. Die Wochen in beide Richtungen. Dann brauchst du auch kein alert.

                    ich war selbst erstaunt, das ich damals schon <input type="number" ...> genommen habe :). Aber da es damals in den meisten Browsern wirkungslos war, habe ich es nicht weiter berücksichtigt. Ich habe die Seite, die nicht verlinkt ist, auch nur raus gekramt, weil wir vor ein paar Tagen über die jährlichen Stromkosten von Servern diskutiert haben.

                    Gruß Jürgen

      2. Moin!

        Wie heißt so ein Vorhaben?

        Da tragen wir mal die Erkenntnisse zusammen: Du kannst kein Javascript, willst aber an einem Shop rumfummeln.

        Das ist "grob fahrlässig begangener ökonomischer Selbstmord". Bitte sei nicht beleidigt: Du hast gefragt.

        Zu Deinem Problem:

        Das ist so einfach nicht lösbar:

        1. weil Du vermutlich mehrere Produkte auf der Webseite hast. Es gibt also mehrere Produkte, die jeweils eine Anzahl und einen Einzelpreis haben;
        2. aus dem von Dir gezeigten Code geht nichts hervor, wie und wo Du den Gesamtpreis darstellen willst;

        Damit fehlen schon Grundvoraussetzungen, um das Problem überhaupt lösen zu können. Das wieder bedeutet, es muss die Seite verändert werden - was wieder bedeutet, es muss auch serverseitig, also wahrscheinlich an PHP-Skripten was getan werden.

        Kannst Du das?

        Jörg Reinholz

        1. Hallo,

          deine Bedenken in allen Ehren, spielen hier aber keine Rolle. A) ist es kein Shop wie kommst du auf dieses Aussage? B) Habe ich nicht von mehreren Produkte gesprochen. C) Ich habe ein klares Beispiel vorgegeben.

          1. Moin!

            A) ist es kein Shop wie kommst du auf dieses Aussage?

            Tja. Es soll ein Preis mit einer Anzahl multipliziert werden. Da dürften wohl Shops in der Zahl der Anwendungsfälle ganz klar vorne liegen.

            B) Habe ich nicht von mehreren Produkte gesprochen.

            C) Ich habe ein klares Beispiel vorgegeben.

            Wie schon beschrieben. Es fehlen Voraussetzungen.

            Der Event für das Input-Feld ist onkeyup. Wenn der feuert muss eine Funktion aufgerufen werden, welche den Einzelpreis holt und dann multipliziert und dann formatiert irgendwo einträgt.

            Das ist eigentlich trivial. Aber es fehlen: Der Einzelpreis an einer definierten Stelle oder besser als Variable und das Ziel.

            Jörg Reinholz

            1. Hallo,

              Das ist eigentlich trivial.

              ich hab grad mal gesucht, weil ich dachte, im Wiki müsste es dazu doch ein Tutorial geben. Bin aber nicht fündig geworden. Ist das vielleicht der Grund, warum ich immernoch keine Ahnung von JS habe?

              Gruß
              Kalk

              1. Moin!

                Das ist eigentlich trivial.

                ich hab grad mal gesucht, weil ich dachte, im Wiki müsste es dazu doch ein Tutorial geben.

                Vielleicht zu trivial?

                Jörg Reinholz

            2. Hi,

              Das ist eigentlich trivial.

              der nicht-triviale Teil ist IMO das Formatieren des Ausgabestrings. Denn leider sucht man in Javascript so praktische Funktionen wie number_format() oder sprintf() vergeblich, mit denen uns PHP verwöhnt.

              Schon so simple Aufgaben wie das Ausgeben einer Zahl mit führenden Nullen (hier nicht verlangt) bedeutet in Javascript schon umständliche Verrenkungen.

              So long,
               Martin

              1. Moin!

                Hi,

                Das ist eigentlich trivial.

                der nicht-triviale Teil ist IMO das Formatieren des Ausgabestrings. Denn leider sucht man in Javascript so praktische Funktionen wie number_format() oder sprintf() vergeblich, mit denen uns PHP verwöhnt.

                Es gibt das Grundlegende:

                number.toFixed(Nachkommastellen)

                Schon so simple Aufgaben wie das Ausgeben einer Zahl mit führenden Nullen (hier nicht verlangt) bedeutet in Javascript schon umständliche Verrenkungen.

                Jepp. Hier ein paar Lösungsansätze.

                Jörg Reinholz

            3. @@Jörg Reinholz

              Der Event für das Input-Feld ist onkeyup.

              Zum einen heißt das Ding keyup (ohne on). Zum anderen ist das nicht der richtige Eventtyp, denn …

              Wenn der feuert

              … das Event feuert nicht, wenn die Anzahl per Auf-/Ab-Pfeil (oder was immer der UA im UI zur Verfügung stellt) geändert wird.

              Das Event für das Input-Feld ist change.

              Edit: Doch besser input.

              LLAP 🖖

              --
              „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
              „Hat auf dem Forum herumgelungert …“
              (Wachen in Asterix 36: Der Papyrus des Cäsar)
              1. Moin!

                Das Event für das Input-Feld ist change.

                Im Hinblick auf die Benutzererfahrung würde ich beim Auslösen sowohl von change oder keyup die Funktion aufrufen.

                Jörg Reinholz

          2. Moin!

            A) ist es kein Shop wie kommst du auf dieses Aussage?

            Was soll das werden? Ich wollte gerade Dein HTML umbauen und eine Lösung anbieten. Da sah ich das hier:

            <button id="btn"><span class="cart"></span> Kaufen</button>
            
            1. "Kaufen" - aber kein Shop? Vergackeierst Du uns?
            2. "cart" - aber nicht mehrere Items? Vergackeierst Du uns?

            Wie sollen die von Dir gesuchten Lösungen Dir was bringen, wenn Du uns hier falsche Voraussetzungen auftischst?

            Jörg Reinholz

            1. Hallo,

              Was soll das werden? Ich wollte gerade Dein HTML umbauen und eine Lösung anbieten. Da sah ich das hier:

              <button id="btn"><span class="cart"></span> Kaufen</button>
              
              1. "Kaufen" - aber kein Shop? Vergackeierst Du uns?
              2. "cart" - aber nicht mehrere Items? Vergackeierst Du uns?

              Wie sollen die von Dir gesuchten Lösungen Dir was bringen, wenn Du uns hier falsche Voraussetzungen auftischst?

              Du hast zu mir gesagt ich soll von einem Shop die Finger lassen. Ich habe dir gesagt es ist KEIN Shop und dieses stimmt auch.

              Was ich gerade erstelle ist ein kleines Tool um einen Gruppenraum den wir zur Verfügung stellen zu vermieten. Dafür habe ich ein kleiens Kontaktformular erstellt inkl. eines Feldes mit Personen. Pro Teilnehmer kostet der Raum 27,90 Euro. Also wäre es doch schön, wenn ich z.B. 10 eingebe, dass der Preis von 27,90 auf 270,90 € steigt und dieses dem Kunden "live" angezeigt wird?!

              Sind wir hier schon bei einem Shop? Wenn ja gehen unsere Vorstellungen von einem Shop sehr sehr sehr sehr sehr sehr sehr sehr weit auseinander.

              Wenn ich es richtig verstehe habe ich hier: https://www.tutorials.de/threads/summe-von-input-feldern-berechnen-wie.220335/ die Lösung.

              1. Moin!

                Sind wir hier schon bei einem Shop?

                Die formal richtige Antwort lautet: Ja.

                Wenn ja gehen unsere Vorstellungen von einem Shop sehr sehr sehr sehr sehr sehr sehr sehr weit auseinander.

                Du kannst Dir das gerne von anderen anhören. Zum Beispiel von ein (einstweilige Verfügung) bis zu drei (Hauptsacheverfahren) Richtern, die Dich über die Eigenschaft als Shop umfassend im besten Juristendeutsch aufklären wenn irgendwelche, bei Shops notwendigen Pflichtangaben fehlen und irgendwer meint, Dir deswegen ein Bein stellen zu wollen:

                "Insbesondere die vom Beklagten verwendete Formular-Taste mit dem Begriff "Kaufen" steht in einem objektiv unauflösbaren Widerspruch zu dessen Behauptung, es handele sich nicht um ein Kaufangebot und also auch nicht um einen so genannten "Webshop" und er müsse deshalb die gesetzlichen Vorgaben nicht erfüllen. Diese Behauptung ist, des offensichtlich unwahren Kerns wegen, als reine Schutzbehauptung zu verwerfen. Der Beklagte betreibt nach Erkennen des Gerichts ein Angebot, mit welchem man einen Raum Mieten und verbundene Dienstleistungen bestellen kann. Der Begriff des "Kaufs" erstreckt sich im vorliegenden Zusammenhang nicht nur auf Waren, sondern auch auf Dienstleistungen und immaterielle Rechtsgüter, wie eben die hier vorliegende Raumvermietung und den damit verbundenen Service, so dass die streitgegenständliche Webseite unter jedem Gesichtspunkt ein Verkaufsangebot darstellt. Anderes hat der Beklagte mit seiner Einlassung, es handele sich um eine Raumvermietung auch gerade nicht dargelegt."

                (Virtueller Urteilstext von mir. Kann anders lauten, wird aber den selben Inhalt haben.)

                Jörg Reinholz

                1. Hallo,

                  Wenn ja gehen unsere Vorstellungen von einem Shop sehr sehr sehr sehr sehr sehr sehr sehr weit auseinander.

                  Du kannst Dir das gerne von anderen anhören. Zum Beispiel von ein (einstweilige Verfügung) bis zu drei (Hauptsacheverfahren) Richtern, die Dich über die Eigenschaft als Shop umfassend im besten Juristendeutsch aufklären wenn irgendwelche, bei Shops notwendigen Pflichtangaben fehlen und irgendwer meint, Dir deswegen ein Bein stellen zu wollen:

                  "Insbesondere die vom Beklagten verwendete Formular-Taste mit dem Begriff "Kaufen" steht in einem objektiv unauflösbaren Widerspruch zu dessen Behauptung, es handele sich nicht um ein Kaufangebot und also auch nicht um einen so genannten "Webshop". Deshalb ist diese Behauptung des offensichtlich unwahren Kerns wegen als reine Schutzbehauptung zu verwerfen. Der Beklagte betreibt nach Erkennen des Gerichts ein Angebot, mit welchem man einen Raum Mieten und verbundene Dienstleistungen bestellen kann. Der Begriff des "Kaufs" erstreckt sich im vorliegenden Zusammenhang nicht nur auf Waren, sondern auch auf Dienstleistungen und immaterielle Rechtsgüter, wie eben die hier vorliegende Raumvermietung und den damit verbundenen Service, so dass die streitgegenständliche Webseite unter jedem Gesichtspunkt ein Verkaufsangebot darstellt. Anderes hat der Beklagte mit seiner Einlassung, es handele sich um eine Raumvermietung auch gerade nicht dargelegt."

                  sorry ganz ehrlich, auf diese Diskussion habe ich keine Lust. Du bist ein kleines Unternehmen aus Kassel welches sich sehr gerne mit Gerichten beschäftigt. Bist aber soweit ich es sehen konnte KEIN Anwalt oder Richter. Du darfst überhaupt keine Rechtsberatung geben! Wenn ich eine Abmahnung erhalte, gut dann wird eben bezahlt, gehört im Berufsleben dazu.

                  Also entweder hast du etwas Sinnvolles beizutragen oder lass es einfach bleiben! Rechtsberatungen möchte ich von dir hier keine haben.

                  1. Hallo,

                    oder lass es einfach bleiben!

                    Du kannst für dich entscheiden, einzelne Antworten zu ignorieren. Du kannst aber nicht anderen vorschreiben, was sie hier schreiben.

                    Gruß
                    Kalk

                    1. Hallo,

                      Du kannst für dich entscheiden, einzelne Antworten zu ignorieren. Du kannst aber nicht anderen vorschreiben, was sie hier schreiben.

                      war ja auch nur auf mich bezogen. Wenn sich jemand auf solche Aussagen von Webagentur aus Kassel einlassen möchte bitte, ich werde niemanden dran hindern. Ich meine ich hätte irgendwo gelesen dass eine Rechtsberatung im Internet nicht zugelassen ist bzw. nur von Anwälten durchgeführt werden dürfen.

                      1. Moin!

                        meine ich hätte irgendwo gelesen dass eine Rechtsberatung im Internet nicht zugelassen ist bzw. nur von Anwälten durchgeführt werden dürfen.

                        Nur hättest Du, bevor Du Dich darüber auslässt, erst mal nachschauen sollen, was die Rechtsberatung im Sinne des Rechtsdienstleistungsgesetzes überhaupt ist. Nämlich eine Rechtsdienstleistung.

                        Und da haben wir in Absatz 3:

                        (3) Rechtsdienstleistung ist nicht:

                        5. die an die Allgemeinheit gerichtete Darstellung und Erörterung von Rechtsfragen und Rechtsfällen in den Medien,

                        Zu dem ist der Ausgangspunkt der Diskussion keine Rechtsfrage, sondern eine Frage der Verwendung des Begriffs "Webshop" für eine Webseite, auf der ein "Kaufen"-Button ist und eine Dienstleistung angeboten wird. In der lagen wir "überkreuz" und ich habe Dir gesagt was passieren kann.

                        Hier greift dann also noch Absatz 1:

                        (1) Rechtsdienstleistung ist jede Tätigkeit in konkreten fremden Angelegenheiten, sobald sie eine rechtliche Prüfung des Einzelfalls erfordert.

                        Wenn ich einer Sockenpuppe vorführe, was passieren kann, dann fehlt es unter gleich zwei Aspekten an der Konkretheit der rechtlichen Angelegenheit.

                        Summa Summarum: Eine illegale Rechtsberatung liegt nicht vor.

                        Also entweder hast du etwas Sinnvolles beizutragen oder lass es einfach bleiben!

                        Frage: Hast Du denn was sinnvolles beizutragen, Sara?

                        Jörg Reinholz

                  2. Moin!

                    Du bist ein kleines Unternehmen aus Kassel

                    Da "Größe" unter verschiedenen Aspekten ganz offenbar ganz verschieden definiert wird behaupte ich mal, dass es immer Leute und sich als "groß", gar als "Marktführer" bewerbende Firmen gibt, die mir in all ihrer Jämmerlichkeit das Wasser nicht reichen können.

                    Jörg Reinholz

      3. @@Jochen

        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.
        2. Wenn das feuert, dessen aktuellen Wert auslesen,
        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 wäre der passende Elementtyp dafür, nicht div; dann geht das auch genauso wie beim Eingabeelement.

        LLAP 🖖

        --
        „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
        „Hat auf dem Forum herumgelungert …“
        (Wachen in Asterix 36: Der Papyrus des Cäsar)
        1. Hallo,

          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.
          2. Wenn das feuert, dessen aktuellen Wert auslesen,
          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 wäre der passende Elementtyp dafür, nicht div; dann geht das auch genauso wie beim Eingabeelement.

          danke für deine Erklärung. Ich habe hier https://www.tutorials.de/threads/summe-von-input-feldern-berechnen-wie.220335/ etwas gefunden. Ich werde versuchen dieses bei mir einzubauen. Sollte es nicht klappen, melde ich mich auf tutorials.de an um dort weiter zu diskutieren. Man muss sich ja nicht doppelte Arbeit machen.

          1. @@Jochen

            Ich habe hier https://www.tutorials.de/threads/summe-von-input-feldern-berechnen-wie.220335/ etwas gefunden.

            Welches für deinen Anwendungsfall unnötig kompliziert ist.

            Einen Button hast du auch nicht, und click wäre fürs Eingabefeld das falsche Event.

            Dass dort <input disabled> statt <output> verwendet wird, ist dem hochbetagten Alter des Beitrags zuzuschreiben.

            LLAP 🖖

            --
            „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
            „Hat auf dem Forum herumgelungert …“
            (Wachen in Asterix 36: Der Papyrus des Cäsar)
        2. Hallo Gunnar,

          1. auf das change-Event des Eingabefeldes lauschen.

          wie würdest du denn das Problem lösen, dass change erst feuert, wenn das Eingabefeld den Focus verliert?

          Gruß Jürgen

          1. Moin!

            wie würdest du denn das Problem lösen, dass change erst feuert, wenn das Eingabefeld den Focus verliert?

            Solange Du Dich keyup (Wohl, weil der Vorschlag von mir kommt...) und input verweigerst kann auch Gunnar Dein Problem nicht lösen.

            Jörg Reinholz

            1. Hallo Jörg,

              Solange Du Dich keyup (Wohl, weil der Vorschlag von mir kommt...) und input verweigerst kann auch Gunnar Dein Problem nicht lösen.

              was soll das denn jetzt? Ich habe - so glaube ich - deutlich geschrieben, dass ich (!) diese Lösung nicht gut finde. Und eine mögliche Alternative läuft schließlich hier im Forum.

              Gruß Jürgen

          2. @@JürgenB

            wie würdest du denn das Problem lösen, dass change erst feuert, wenn das Eingabefeld den Focus verliert?

            Wenn das wirklich ein Problem ist und man wirklich möchte, dass sich der Betrag mit jedem Tastendruck aktualisiert, wie Jörg schon sagte: den Eventhandler zusätzlich zu change auch für ein Tastaturevent registrieren – nur nicht mit .on…, sondern mit addEventListener.

            Wobei sich die Frage stellt, für welchen Eventtypen. Erst beim Loslassen der Taste, nicht schon beim Drücken? Vermutlich kein key…, sondern textinput – wie sieht die Browserunterstützung dafür heute aus?

            LLAP 🖖

            --
            „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
            „Hat auf dem Forum herumgelungert …“
            (Wachen in Asterix 36: Der Papyrus des Cäsar)
            1. @@Gunnar Bittersmann

              wie würdest du denn das Problem lösen, dass change erst feuert, wenn das Eingabefeld den Focus verliert?

              Wenn das wirklich ein Problem ist und man wirklich möchte, dass sich der Betrag mit jedem Tastendruck aktualisiert, wie Jörg schon sagte: den Eventhandler zusätzlich zu change auch für ein Tastaturevent registrieren – nur nicht mit .on…, sondern mit addEventListener.

              ich finde es nur störend, wenn bei jedem Tastendruck neu gerechnet wird. Ich hätte da eher an etwas wie einen "verzögerten keyup/input" gedacht, so wie es die Forumssoftware bei der Vorschau macht, oder Aktualisierung erst wenn eine bestimmte Zeit keine Benutzeraktion war.

              Wobei sich die Frage stellt, für welchen Eventtypen. Erst beim Loslassen der Taste, nicht schon beim Drücken? Vermutlich kein key…, sondern textinput – wie sieht die Browserunterstützung dafür heute aus?

              textinput scheint IE-Only zu sein, bei input versagen Opera Mini und IE 8 bzw. auch 9. Aber Input feuert ähnlich oft wie die key-Events.

              Gruß Jürgen

              1. @@JürgenB

                textinput – wie sieht die Browserunterstützung dafür heute aus?

                textinput scheint IE-Only zu sein, bei input versagen Opera Mini und IE 8 bzw. auch 9. Aber Input feuert ähnlich oft wie die key-Events.

                Da hab ich mich von dem angestaubten Artikel von PPK in die Irre führen lassen. Die Unterstützung von input sieht ja gar nicht so schlecht aus.

                LLAP 🖖

                --
                „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                „Hat auf dem Forum herumgelungert …“
                (Wachen in Asterix 36: Der Papyrus des Cäsar)
                1. @@Gunnar Bittersmann

                  Da hab ich mich von dem angestaubten Artikel von PPK in die Irre führen lassen. Die Unterstützung von input sieht ja gar nicht so schlecht aus.

                  Und input feuert sowohl bei Änderungen per Texteingabe als auch bei Änderungen per Auf-/Ab-Pfeil. \o/

                  Damit sollte die Resgistrirung des Eventhandlers für einen Eventtypen genügen, nämlich für diesen.

                  LLAP 🖖

                  --
                  „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                  „Hat auf dem Forum herumgelungert …“
                  (Wachen in Asterix 36: Der Papyrus des Cäsar)
            2. Moin!

              Wobei sich die Frage stellt, für welchen Eventtypen. Erst beim Loslassen der Taste, nicht schon beim Drücken?

              Ja. Erst beim Loslassen. Ich habe damit mal gespielt und fest gestellt, dass das Zeichen bei keydown noch nicht drin steht. Das feuert früher.

              Jörg Reinholz

        3. @@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.
          2. Wenn das feuert, dessen aktuellen Wert auslesen,
          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 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

          So in etwa.

          LLAP 🖖

          --
          „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
          „Hat auf dem Forum herumgelungert …“
          (Wachen in Asterix 36: Der Papyrus des Cäsar)

          1. assistive Technologie ↩︎