ingobar: onClick-Function eines Btns ändern

Hallo zusammen,

ich würde gerne die benutzte Funktion beim onClick-Event eines Buttons dynamisch ändern. Leider klappt es nicht. Wie müsste ich es ändern?

function showSolutions() {
 document.getElementById("showSolutionsBtn").value = "Lösungen verstecken";
 document.getElementById("showSolutionsBtn").onClick = "hideSolutions()";
}

function hideSolutions() {
 document.getElementById("showSolutionsBtn").value = "Lösungen anzeigen";
 document.getElementById("showSolutionsBtn").onClick = "showSolutions()";
}

Im HTML-Code steht dann dies:

<input type="button" value="Lösungen anzeigen" onClick="showSolutions()" id="showSolutionsBtn">

  1. Hi,

    ich würde gerne die benutzte Funktion beim onClick-Event eines Buttons dynamisch ändern. Leider klappt es nicht. Wie müsste ich es ändern?

    abgesehen davon, dass "klappt nicht" nicht klappt: Im Gegensatz zu HTML ist JavaScript case-sensitive - genau wie XHTML. Und, oh Wunder, hättest Du valides XHTML geschrieben, wäre Dir nie ein Problem aufgefallen.

    Das sollte zur Lösung eigentlich ausreichen.

    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. abgesehen davon, dass "klappt nicht" nicht klappt: Im Gegensatz zu
      HTML ist JavaScript case-sensitive - genau wie XHTML. Und, oh Wunder,
      hättest Du valides XHTML geschrieben, wäre Dir nie ein Problem
      aufgefallen.

      Habe kein valides XHTML geschrieben? Woran kann man das erkennen?

      Ach ja, leider hilft mir dein Tipp überhaupt nicht weiter. Könntest du für die nicht so Cleveren deinen Tipp etwas spezifizieren?

      1. Hi,

        Habe kein valides XHTML geschrieben? Woran kann man das erkennen?

        beispielsweise daran, dass Du ein Attribut namens "onClick" eingesetzt hast. In XHTML gibt es sowas nicht. Für Menschen sieht es so ähnlich aus wie das XHTML-Attribut "onclick".

        Ach ja, leider hilft mir dein Tipp überhaupt nicht weiter. Könntest du für die nicht so Cleveren deinen Tipp etwas spezifizieren?

        Noch mehr als das, was ansonsten in diesem Thread gesagt wurde?

        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. beispielsweise daran, dass Du ein Attribut namens "onClick" eingesetzt hast. In XHTML gibt es sowas nicht. Für Menschen sieht es so ähnlich aus wie das XHTML-Attribut "onclick".

          Sollte ich denn XHTML benutzen? Bei mir beginnt jedes html-Dokument so:
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

          Ist das denn falsch oder ungeschickt?

          Ach ja, leider hilft mir dein Tipp überhaupt nicht weiter. Könntest du für die nicht so Cleveren deinen Tipp etwas spezifizieren?

          Noch mehr als das, was ansonsten in diesem Thread gesagt wurde?

          Wäre toll. Denn abgesehenvon der toggle-Variante, die halt mal nicht machen wollte, hätte ich es gerne ans Laufen bekommen.

          Bei mir sieht es jetzt so aus:

          function showSolutions() {
           document.getElementById("showSolutionsBtn").value = "Lösungen verstecken";
           document.getElementById("showSolutionsBtn").onclick = "hideSolutions";
          }

          function hideSolutions() {
           document.getElementById("showSolutionsBtn").value = "Lösungen anzeigen";
           document.getElementById("showSolutionsBtn").onclick = "showSolutions";
          }

          <input type="button" value="Lösungen anzeigen" onclick="showSolutions()" id="showSolutionsBtn">

          Die Beschriftung wird auch geändert, aber sonst passiert rein gar nichts. Auch keine Fehlermeldung.

          ingobar

          1. document.getElementById("showSolutionsBtn").onclick = "hideSolutions";
            document.getElementById("showSolutionsBtn").onclick = "showSolutions";

            Siehe Struppis Hinweis.

            Siechfred

            --
            Ich bin strenggenommen auch nur interessierter Laie. (molily)
            Siechfreds Tagebuch || Falle Aufteilungsbescheid || RT 221 Erfurt-Altstadt i.V.
            1. Siehe Struppis Hinweis.

              War auch nicht wirklich hilfreich. Ich habe dann einfach mal die Möglichkeiten ausprobiert und irgendwann hatte ich es dann tatsächlich

              document.getElementById("showSolutionsBtn").onclick = function () {showSolutions();};

              Hätte doch auch gleich einer sagen können, oder?

              ingobar

              1. Hi,

                War auch nicht wirklich hilfreich.

                warum nicht? Wir haben doch direkt auf die Fehler hingewiesen (okay, jeder auf einen anderen).

                document.getElementById("showSolutionsBtn").onclick = function () {showSolutions();};

                Die gekapselte Funktion ist hier nicht einmal nötig; ein einfaches

                document.getElementById("showSolutionsBtn").onclick = showSolutions;

                hätte es auch getan.

                Hätte doch auch gleich einer sagen können, oder?

                Haben wir doch ...

                Ciao,
                 Martin

                --
                Auf jeden Menschen auf der ganzen Welt entfallen statistisch gesehen etwa 3000 Spinnen, wie Wissenschaftler jetzt festgestellt haben.
                Wer will meine haben? Denn ich will sie bstimmt nicht.
              2. Hi,

                Hätte doch auch gleich einer sagen können, oder?

                hättest Du dann die Gründe dafür verstanden? Hätte es Dir geholfen, das nächste, ähnlich gelagerte Problem zu lösen?

                Fertige Lösungen zu posten ist schädlich. *Gerade* bei einfachen Problemen.

                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
          2. Hi,

            Sollte ich denn XHTML benutzen?

            das ist zumindest meistens empfehlenswert. Zumindest solltest Du aber unbedingt damit beginnen, den HTML-Code sich so nah wie möglich (also wie erlaubt) an XHTML orientieren zu lassen: keine Empty Attributes, Attributwerte immer in Anführungszeichen, case-sensitivity ...

            Ist das denn falsch oder ungeschickt?

            Falsch auf keinen Fall. Ungeschickt vielleicht, aber auch nicht unbedingt.

            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
  2. Hell-O!

    document.getElementById("showSolutionsBtn").onClick = "hideSolutions()";
    document.getElementById("showSolutionsBtn").onClick = "showSolutions()";

    Richtig wäre "onclick" (Javascript ist case-sensitive). Du solltest eine entsprechende Fehlermeldung bekommen haben ("Das Objekt unterstützt die Eigenschaft nicht" o.ä.)

    Siechfred

    --
    Ich bin strenggenommen auch nur interessierter Laie. (molily)
    Siechfreds Tagebuch || Falle Aufteilungsbescheid || RT 221 Erfurt-Altstadt i.V.
    1. Hi,

      Du solltest eine entsprechende Fehlermeldung bekommen haben ("Das Objekt unterstützt die Eigenschaft nicht" o.ä.)

      bei JavaScript lassen sich jedem Objekt beliebige Eigenschaften hinzufügen (im Rahmen der erlaubten Syntax und Keywords, versteht sich). Es ist kein Fehler, etwas Nichtexistentes anzulegen - sondern höchstens, es zu benutzen.

      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,

        bei JavaScript lassen sich jedem Objekt beliebige Eigenschaften hinzufügen (im Rahmen der erlaubten Syntax und Keywords, versteht sich). Es ist kein Fehler, etwas Nichtexistentes anzulegen - sondern höchstens, es zu benutzen.

        Auch das ist hier kein Fehler - lediglich die Erwartung, etwas Unbekanntes würde wie etwas Bekanntes interpretiert werden, ist unzutreffend :-)

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Hi,

          bei JavaScript lassen sich jedem Objekt beliebige Eigenschaften hinzufügen (im Rahmen der erlaubten Syntax und Keywords, versteht sich). Es ist kein Fehler, etwas Nichtexistentes anzulegen - sondern höchstens, es zu benutzen.
          Auch das ist hier kein Fehler

          hier nicht - genau deshalb schrieb ich "höchstens". Wenn man denn aber versucht, die onClick-Eigenschaft irgend einen Elements auszuführen ... :-)

          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,

            hier nicht - genau deshalb schrieb ich "höchstens". Wenn man denn aber versucht, die onClick-Eigenschaft irgend einen Elements auszuführen ... :-)

            element.onClick = funktionsreferenz;
            element.onClick();

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            1. Hi,

              element.onClick = funktionsreferenz;
              element.onClick();

              [dsf 9.3]

              Ich schrieb davon, dass es ein Fehler sein kann, etwas _Nichtexistentes_ zu benutzen. Ist die onClick-Eigenschaft in der Zeile, in der Du sie ausführst, nichtexistent?

              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
      2. Hell-O!

        So gehe ich denn hin und schreibe 100 mal "Ich soll vor dem Posten nachdenken" auf meinen Bildschirm.

        Siechfred

        PS: Hat jemand mein Tippex gesehen?

        --
        Ich bin strenggenommen auch nur interessierter Laie. (molily)
        Siechfreds Tagebuch || Falle Aufteilungsbescheid || RT 221 Erfurt-Altstadt i.V.
    2. Richtig wäre "onclick" (Javascript ist case-sensitive). Du solltest eine entsprechende Fehlermeldung bekommen haben ("Das Objekt unterstützt die Eigenschaft nicht" o.ä.)

      Ich hatte erst onclick (wegen deinem Grund), aber das hatte nicht funktioniert.

      ingobar

  3. ich würde gerne die benutzte Funktion beim onClick-Event eines Buttons dynamisch ändern. Leider klappt es nicht. Wie müsste ich es ändern?

    Mit einer kurzen Suche müßtest du eigentlich schnell eine Lösung finden.

    Aber ich würde eher eine "toggle" Funktion verwenden und nicht jedesmal die Funktion ändern.

    <input type="button" value="Lösungen anzeigen" onClick="toogle(this)" id="showSolutionsBtn">

    function toggle(el)
    {
    el.value = (el.value  == "Lösungen verstecken") ? "Lösungen anzeigen" : "Lösungen verstecken" ;
    }

    Struppi.

    --
    Javascript ist toll (Perl auch!)
  4. Hallo,

    function showSolutions() {
    document.getElementById("showSolutionsBtn").value = "Lösungen verstecken";
    document.getElementById("showSolutionsBtn").onClick = "hideSolutions()";
    }

    dadurch, dass du die Klammern angibst und so die Parameterliste der Funktion andeutest, rufst du die Funktion hideSolutions() an dieser Stelle auf und weist ihren Rückgabewert der Eigenschaft onClick zu. Da diese Eigenschaft vorher nicht existiert, wird sie neu erzeugt - aber einen Zweck bzw. eine Verwendung hat sie ja nicht. Im Gegensatz z.B. zur onclick-Eigenschaft, die eine Referenz auf die Funktion enthält, die beim Klicken aufgerufen werden soll.

    document.getElementById("showSolutionsBtn").onClick = "showSolutions()";

    Dito.
    Wenn ich richtig vermute, was du wirklich willst, enthält diese Zeile, wie auch die obige, zwei Fehler. Erstens ist die onclick-Eigenschaft falsch geschrieben, zweitens willst du nicht das Funktionsergebnis, sondern quasi die Funktion selbst zuweisen.

    Im HTML-Code steht dann dies:
    <input type="button" value="Lösungen anzeigen" onClick="showSolutions()" id="showSolutionsBtn">

    Auch hier ist das onclick-Attribut falsch geschrieben - aber wenn es "nur" HTML ist, spielt das keine Rolle. In XHTML wäre das ein klarer Fehler.

    So long,
     Martin

    --
    Einer aktuellen Erhebung zufolge sind zehn von neun Ehefrauen eifersüchtig auf ihren Mann.
    1. function showSolutions() {
      document.getElementById("showSolutionsBtn").value = "Lösungen verstecken";
      document.getElementById("showSolutionsBtn").onClick = "hideSolutions()";
      }

      dadurch, dass du die Klammern angibst und so die Parameterliste der Funktion andeutest, rufst du die Funktion hideSolutions() an dieser Stelle auf und weist ihren Rückgabewert der Eigenschaft onClick zu.

      Wohl kaum. Er weisst lediglich der Eiegnschaft onClick einen String zu, passieren tut da nichts.

      Struppi.

      --
      Javascript ist toll (Perl auch!)
      1. Hallo,

        [...] rufst du die Funktion hideSolutions() an dieser Stelle auf und weist ihren Rückgabewert der Eigenschaft onClick zu.
        Wohl kaum. Er weisst lediglich der Eiegnschaft onClick einen String zu, passieren tut da nichts.

        aaah, stimmt. Dritter Fehler. ;-)

        Ciao,
         Martin

        --
        Ich liebe Politiker auf Wahlplakaten.
        Sie sind tragbar, geräuschlos, und leicht wieder zu entfernen.
          (Loriot, deutscher Satiriker)