onClick-Function eines Btns ändern
ingobar
- javascript
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">
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
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?
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
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
document.getElementById("showSolutionsBtn").onclick = "hideSolutions";
document.getElementById("showSolutionsBtn").onclick = "showSolutions";
Siehe Struppis Hinweis.
Siechfred
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
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
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
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
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
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
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
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
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
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
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?
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
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.
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
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.
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