JS - "Wenn Button X gedrückt wurde, mache dies"

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • JS - "Wenn Button X gedrückt wurde, mache dies"

    Hi Coder,

    habe mal wieder Zeit, mich mit JS zu beschäftigen.

    Habe ein paar kleine Sachen geschireben; allerdings alles andere als sauber.

    Meine Frage:

    Nehmen wir einfach mal ein Beispiel.
    Ich habe einen kleinen Taschenrechner. Es gibt darunter auch 2 Buttons; nämlich Ergebnis als Zahl1 und Ergebnis als Zahl2.
    Der User gibt erstmal in einem Textfeld eine Zahl ein, die andere in ein darunterliegendes Textfeld und klickt auf einen Button.
    Dieser addiert beide zusammen und gibt das Ergebnis in einem extra Textfeld aus.

    Wenn er jetzt den Button "Ergebnis als Zahl 1" anklickt, erscheint die erste eingegebene Zahl in dem Textfeld Ergebnis im Feld Zahl 1.
    Der Button ruft ein Java Script auf.

    Das Gleiche gibt es jetzt auch für die Zahl 2. Wenn auf den Button geklickt wird, wird eine andere Funktion aufgerufen.

    Ungefähr so:

    Quellcode

    1. <script type='text/javascript'>
    3. function ergebnisalszahl1 ()
    4. {
    5. var ergebnisalszahl1 = document.form1.tf3.value;
    6. document.form1.tf1.value = ergebnisalszahl1;
    7. }
    9. </script>
    11. <script type='text/javascript'>
    13. function ergebnisalszahl2 ()
    14. {
    15. var ergebnisalszahl2 = document.form1.tf3.value;
    16. document.form1.tf2.value = ergebnisalszahl2;
    17. }
    19. </script>
    21. <input type='button' value='Ergebnis als Zahl 1' name='ergebniszahl1' onClick='ergebnisalszahl1()';></input>
    22. <br>
    23. <input type='button' value='Ergebnis als Zahl 2' name='ergebniszahl2' onClick='ergebnisalszahl2()';></input>
    Alles anzeigen


    Ist etwas umständlich.

    Geht denn nicht so etwas wie:

    Quellcode

    1. <script type='text/javascript'>
    3. function ergebnisalszahl()
    4. {
    5. if (button "ergebniszahl1" geklickt)
    6. {
    7. var ergebnisalszahl1 = document.form1.tf3.value;
    8. document.form1.tf1.value = ergebnisalszahl1;
    10. }
    12. else if (button "ergebniszahl2" geklickt)
    13. {
    14. {
    15. var ergebnisalszahl2 = document.form1.tf3.value;
    16. document.form1.tf2.value = ergebnisalszahl2;
    17. }
    18. }
    19. </script>
    20. }
    23. <input type='button' value='Ergebnis als Zahl 1' name='ergebniszahl1' onClick='ergebnisalszahl()';></input>
    24. <br>
    25. <input type='button' value='Ergebnis als Zahl 2' name='ergebniszahl2' onClick='ergebnisalszahl()';></input>
    Alles anzeigen

  • Fuer deine Loesung benoetigst du den this-Operator, ueber den du auf das name-Attribut deiner Buttons zugreifen und dies beim Aufruf von ergebnisalszahl() direkt uebergeben kannst.

    Lese dich ein wenig in eines der viele JavaScript-HowTo s ein (Stichwort this und OOP), und dir sollte schnell klar werden wie genau du das anstellst.


    PS: Entschuldigt das englische-Tastaturlayout...

  • Ist zwar schon ein wenig länger her, aber hier trotzdem mein Vorschlag:

    Zunächst einmal die beiden Buttons ohne jegliches JavaScript:

    Quellcode

    1. <input type="button" id="button1" value="Ergebnis als Zahl 1" />
    2. <input type="button" id="button2" value="Ergebnis als Zahl 2" />


    Dann noch einen Eventhandler für beide Buttons. Dieser nimmt den Parameter "event" entgegen, aus dem sich das geklickte Element mittels target ermitteln läßt.

    Quellcode

    1. function setErgebnisAlsZahl(event) {
    2. var button = event.target;
    3. var ergebnisalszahl = document.form1.tf3.value;
    4. if (button.value == 'Ergebnis als Zahl 1')
    5. document.form1.tf1.value = ergebnisalszahl;
    6. else if (button.value == 'Ergebnis als Zahl 2')
    7. document.form1.tf2.value = ergebnisalszahl;
    8. }


    Schließlich müssen den beiden Buttons nur noch der EventHandler zugeordnet werden. Hierbei ist es wichtig die Funktion setErgebnisAlsZahl zuzuweisen, ohne sie aufzurufen (d.h. ohne Klammern!).

    Quellcode

    1. window.onload = function() {
    2. document.getElementById('button1').onclick = setErgebnisAlsZahl;
    3. document.getElementById('button2').onclick = setErgebnisAlsZahl;
    4. }