Rainer: Auf Klick Zahlen addieren und in DIV einblenden

Hi Forum,

mir schwebt da was vor, was ich aber nicht umsetzen kann. Bzw. würde ich gerne wissen, ob Ihr das auch so realisieren würdet oder anders?

Ich generiere eine Zahlenliste in php. Nun muß ich hiervon einige Zahlen addieren, aber nicht alle. Dazu muß ich jedes mal den Taschenrechner hervor kramen und eintippen.

Schön wäre aber, wenn ich einen javascript-link zu jeder Zahl generieren könnte, der mir dann diese Zahlen aufaddiert. Das ganz soll in einem DIV dann dargestellt werden, ungefähr so:

ID1: 205,44
ID3: 200,00
ID7: 100,56
-------------
Sum: 505,10

und bei Klick auf das Div soll "der Speicher" wieder zurückgesetzt werden, damit ich die nächsten Zahlen addieren kann.

Ich dachte, hierzu wäre sicherlich Javascript am geeignetsten, oder?

Javascript kann Zahlen addieren und DIVs erstellen. Dennoch weiß ich nicht genau, wie ich vorgehen muß, da ich Javascript-Anfänger bin.

Könnt Ihr mir dabei helfen? Wie beginne ich das?

Grüße, Rainer

  1. Hilft Dir der SELFHTML-Taschenrechner weiter? ->http://de.selfhtml.org/javascript/beispiele/taschenrechner.htm

    Viel Erfolg

  2. Hi,

    Ich dachte, hierzu wäre sicherlich Javascript am geeignetsten, oder?

    ja, scheint mir so.

    Javascript kann Zahlen addieren und DIVs erstellen. Dennoch weiß ich nicht genau, wie ich vorgehen muß, da ich Javascript-Anfänger bin.

    Könnt Ihr mir dabei helfen? Wie beginne ich das?

    Die wichtigsten Stichpunkte hast Du selbst genannt. Beschäftige Dich mit DOM, insbesondere der Selektion von Elementen sowie der Erstellung neuer Elemente; darüber hinaus noch ein paar Details:

    • Die Zahlen-Inhalte Deiner Elemente sind zunächst einmal Text, also Strings. In JavaScript ist "1"+"2"=="12", hingegen ist 1+2==3. Wandle die Texte also in Zahlen um.

    • In so ziemlich allen Programmiersprachen dieses Planeten werden Nachkommastellen durch einen Punkt abgetrennt, nicht durch ein Komma. Wandelst Du also "205,44" in eine Zahl um, lautet diese 205. Aus "205.44" hingegen würde 205.44 werden.

    • Ein anfangs schwieriges, jedoch sehr wichtiges und nach einiger Übung auch leichtes Thema lautet "Closure". Hierdurch kannst Du Deine neu erzeugten Elemente leichter mit dem Inhalt korrelieren lassen, zu dem sie gehören. Lies Dich zu Closures ein und versuche es bitte! Es mag nicht auf Anhieb funktionieren - kein Thema, Du kriegst es für diese Aufgabe auch anders hin. Zumindest hattest Du dann aber schon mal Kontakt damit und kannst beim nächsten Problem, dass sich ohne Closures nicht so leicht lösen lässt, an ein wenig Erfahrung anknüpfen.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hi,

      • Die Zahlen-Inhalte Deiner Elemente sind zunächst einmal Text, also Strings. In JavaScript ist "1"+"2"=="12", hingegen ist 1+2==3. Wandle die Texte also in Zahlen um.

      Gut zu wissen, danke!

      • Ein anfangs schwieriges, jedoch sehr wichtiges und nach einiger Übung auch leichtes Thema lautet "Closure". Hierdurch kannst Du Deine neu erzeugten Elemente leichter mit dem Inhalt korrelieren lassen, zu dem sie gehören. Lies Dich zu Closures ein und versuche es bitte! Es mag nicht auf Anhieb funktionieren - kein Thema, Du kriegst es für diese Aufgabe auch anders hin. Zumindest hattest Du dann aber schon mal Kontakt damit und kannst beim nächsten Problem, dass sich ohne Closures nicht so leicht lösen lässt, an ein wenig Erfahrung anknüpfen.

      Puuh, das ist harter Tobak, diese Closures. Aber ich glaube wenigstens schon begriffen zu haben, wofür sie in meinem Fall gut sein sollen. Wobei, sicher bin ich nicht. Ich vermute, sie sollen eine Art Zwischenspeicher bilden, um bspw. die Programmierung mittels Cookies zu verhindern?? Nicht lachen, wenns falsch ist, ja?

      Rainer

      1. Hi,

        Puuh, das ist harter Tobak, diese Closures. Aber ich glaube wenigstens schon begriffen zu haben, wofür sie in meinem Fall gut sein sollen. Wobei, sicher bin ich nicht. Ich vermute, sie sollen eine Art Zwischenspeicher bilden, um bspw. die Programmierung mittels Cookies zu verhindern?? Nicht lachen, wenns falsch ist, ja?

        ich werde bestimmt nicht lachen, wenn Du zu einem komplexen Konzept Verständnisfragen hast :-) Aber nein, mit Cookies (oder dem Verzicht darauf) haben Closures nichts zu tun. Eher mit dem Verzicht auf globale Variablen.

        Einem Closure gibst Du bei der Erzeugung den Kontext (bzw. Scope) mit, für den es gilt - also beispielsweise die Tabellenzeile, in der die zu verarbeitenden Daten stehen. Anschließend braucht die Funktion bei der Ausführung nicht umständlich zu ermitteln, wozu sie eigentlich gehört, sondern "tut einfach". Du kannst in der Funktion agieren, als gäbe es nichts anderes als das, was sie gerade jetzt braucht.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Hi,

          erstmal die gute Nachricht: Mein Programmieranliegen habe ich bereits umgesetzt. Ganz alleine und es ist mega geworden, also wirklich genau, wie ich es wollte - nein, sogar noch besser :-)

          ich werde bestimmt nicht lachen, wenn Du zu einem komplexen Konzept Verständnisfragen hast :-) Aber nein, mit Cookies (oder dem Verzicht darauf) haben Closures nichts zu tun. Eher mit dem Verzicht auf globale Variablen.

          Das ist die weniger gute Nachricht. In Sachen Closures bin ich zwaar weiter gekommen, aber noch längst nicht am Ziel.

          Aber ich habe nach gefühlt-ewigem Suchen 2 nützliche (?) Links zum Thema gefunden, die ich gerade studiere:

          Closures für Anfänger
          Closures für Dummies

          Ich bin gespannt, was ich da an Wissen heraus ziehen kann, geb aber ehrlicherweise zu, dass ich es bisher noch nicht verstanden habe. Aber ich bleibe am Ball und werde es verstehen! :-)

          Einem Closure gibst Du bei der Erzeugung den Kontext (bzw. Scope) mit, für den es gilt - also beispielsweise die Tabellenzeile, in der die zu verarbeitenden Daten stehen.

          Macht man aber doch bei einer Funktion auch. Oder meinst Du, die Funktion selber gibt den Scope an den Closure mit?

          Anschließend braucht die Funktion bei der Ausführung nicht umständlich zu ermitteln, wozu sie eigentlich gehört, sondern "tut einfach". Du kannst in der Funktion agieren, als gäbe es nichts anderes als das, was sie gerade jetzt braucht.

          Arghs, ich verstehs (noch!) nicht. Aber bleibe dran.

          Gruß, Rainer

          1. Hi,

            Das ist die weniger gute Nachricht. In Sachen Closures bin ich zwaar weiter gekommen, aber noch längst nicht am Ziel.

            das ist noch immer eine gute Nachricht. Closures sind, wie ich schon sagte, am Anfang schwer zu verstehen - Respekt für Deine Fortschritte!

            Aber ich habe nach gefühlt-ewigem Suchen 2 nützliche (?) Links zum Thema gefunden, die ich gerade studiere:

            Ich ergänze: http://molily.de/js/organisation-verfuegbarkeit.html

            Einem Closure gibst Du bei der Erzeugung den Kontext (bzw. Scope) mit, für den es gilt - also beispielsweise die Tabellenzeile, in der die zu verarbeitenden Daten stehen.
            Macht man aber doch bei einer Funktion auch. Oder meinst Du, die Funktion selber gibt den Scope an den Closure mit?

            Es wird vom aktuellen Scope eine Art Snapshot mitgegeben. Das macht sich beispielsweise bei Schleifen bemerkbar: Die Schleifenvariable enthält bei Closures den Wert, den sie bei der Erzeugung der Closure-Funktion hatte; ohne Closures erhalten alle erzeugten Funktionen den Wert, den die Schleifenvariable nach komplettem Durchlauf der Schleife hat.

            Arghs, ich verstehs (noch!) nicht. Aber bleibe dran.

            Ich wünsche Dir hierbei viel Erfolg: Mögest Du die richtigen Fragen stellen ;-)

            Cheatah

            --
            X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
            X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
            X-Will-Answer-Email: No
            X-Please-Search-Archive-First: Absolutely Yes