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

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • 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:

    Source Code

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


    Ist etwas umständlich.

    Geht denn nicht so etwas wie:

    Source Code

    1. <script type='text/javascript'>
    2. function ergebnisalszahl()
    3. {
    4. if (button "ergebniszahl1" geklickt)
    5. {
    6. var ergebnisalszahl1 = document.form1.tf3.value;
    7. document.form1.tf1.value = ergebnisalszahl1;
    8. }
    9. else if (button "ergebniszahl2" geklickt)
    10. {
    11. {
    12. var ergebnisalszahl2 = document.form1.tf3.value;
    13. document.form1.tf2.value = ergebnisalszahl2;
    14. }
    15. }
    16. </script>
    17. }
    18. <input type='button' value='Ergebnis als Zahl 1' name='ergebniszahl1' onClick='ergebnisalszahl()';></input>
    19. <br>
    20. <input type='button' value='Ergebnis als Zahl 2' name='ergebniszahl2' onClick='ergebnisalszahl()';></input>
    Display All
  • 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:

    Source Code

    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.

    Source Code

    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!).

    Source Code

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