Ändern Sie die Onclick-Aktion mit einer Javascript-Funktion

Lesezeit: 6 Minuten

Tony Stark

Ich habe einen Knopf:

<button id="a" onclick="Foo()">Button A</button>

Wenn ich zum ersten Mal auf diese Schaltfläche klicke, möchte ich, dass sie Foo ausführt (was sie richtig macht):

function Foo() {
  document.getElementById("a").onclick = Bar();
}

Was ich tun möchte, wenn ich zum ersten Mal auf die Schaltfläche klicke, ist, die Onclick-Funktion von zu ändern Foo() zu Bar(). Bisher konnte ich nur eine Endlosschleife oder gar keine Änderung erreichen. Bar() würde in etwa so aussehen:

function Bar() {
  document.getElementById("a").onclick = Foo();
}

Das Klicken auf diese Schaltfläche wechselt also nur ab, welche Funktion aufgerufen wird. Wie kann ich das zum Laufen bringen? Alternativ, was ist eine bessere Möglichkeit, den vollständigen Text eines Beitrags anzuzeigen/auszublenden? Es beginnt ursprünglich kurzgeschlossen, und ich stelle eine Schaltfläche bereit, um “den vollständigen Text anzuzeigen”. Aber wenn ich auf diese Schaltfläche klicke, möchte ich, dass Benutzer erneut auf die Schaltfläche klicken können, damit die lange Version des Textes verschwindet.

Hier ist der vollständige Code, falls es hilft:

function ShowError(id) {
    document.getElementById(id).className = document.getElementById(id).className.replace(/\bheight_limited\b/, '');
    document.getElementById(id+"Text").className = document.getElementById(id+"Text").className.replace(/\bheight_limited\b/, '');
    document.getElementById(id+"Button").innerHTML = "HIDE FULL ERROR";
    document.getElementById(id+"Button").onclick = HideError(id);
}

function HideError(id) {
    document.getElementById(id).className += " height_limited";
    document.getElementById(id+"Text").className += " height_limited";
    document.getElementById(id+"Button").innerHTML = "SHOW FULL ERROR";
    document.getElementById(id+"Button").onclick = "ShowError(id)";
}

Ich mache dies nicht zu einer Antwort, da Sie speziell nach Vanille-JavaScript fragen, aber Sie sollten sich vielleicht jQuery ansehen. Es ist eine JavaScript-Bibliothek, die Ihnen helfen kann, das zu tun, was Sie in Ihrer Frage tun möchten.

– JasCav

14. März 2011 um 20:12 Uhr
Kennen Sie sich mit JQuery aus, kann in diesem Fall nur Javascript verwenden. Vielen Dank.

– Tony Stark

14. März 2011 um 20:13 Uhr
Das onclick Eigenschaft sollte in Kleinbuchstaben geschrieben werden. developer.mozilla.org/en/DOM/element.onclick

– Mattball

14. März 2011 um 20:15 Uhr
Werden Event-Handler nicht mit += hinzugefügt? Und vielleicht müssen Sie das sogar tun: myobject.onclick += function() { Foo(); }

– Mikael Östberg

14. März 2011 um 20:16 Uhr
Es stellte sich heraus, dass ich das += nicht brauchte. Ich denke, += würde die vorhandene Onclick-Funktion nicht entfernen, oder?

– Tony Stark

14. März 2011 um 20:22 Uhr

Ihr Code ruft die Funktion auf und weist onClick den Rückgabewert zu, auch sollte es ‘onclick’ sein. So sollte es aussehen.

document.getElementById("a").onclick = Bar;

Wenn Sie sich Ihren anderen Code ansehen, möchten Sie wahrscheinlich so etwas tun:

document.getElementById(id+"Button").onclick = function() { HideError(id); }

Ich wollte nur hinzufügen, dass Ryan die Klammern nach Bar nicht einschließt, da es sich nicht um einen Funktionsaufruf handelt.

– Goldfischgranate

7. November 2014 um 4:01 Uhr
… Sie möchten wahrscheinlich so etwas tun: .onclick = HideError; // Wenn das nicht funktioniert, warum nicht. Was ist der Unterschied zur obigen Antwort?

– paschut

1. Juni 2016 um 4:04 Uhr
@pashute Der Unterschied ist das .onclick = HideError wird aufrufen HideError(event: MouseEvent) während die obige Antwort aufruft HideError(id). Wenn Sie sich nicht für Parameter interessieren, können Sie die kürzere Version verwenden und das Ereignis ignorieren, das übergeben wird.

– Patrick

18. Oktober 2019 um 16:04 Uhr

var Foo = function(){
    document.getElementById( "a" ).setAttribute( "onClick", "javascript: Boo();" );
}

var Boo = function(){
    alert("test");
}

Dies scheint der beste Weg zu sein, dies zu tun. Obwohl andere funktionieren, funktioniert das direkte Hinzufügen einer Funktion zu onclick in einigen Szenarien möglicherweise nicht. Ich hatte ein Problem in einem Fall, in dem das Erstellen mehrerer Schaltflächen in einer Schleife und das Zuweisen einer Funktion für onclick für jede Schaltfläche in der Schleife nicht funktionierte. Es würde allen Tasten die Funktion der letzten Taste zuweisen. Die Verwendung dieser Methode funktioniert wie ein Zauber. Danke Hor!

– Deepak-GM

22. Januar 2013 um 8:59 Uhr
Sollte sein onclicknicht onClick.

– Benutzer66001

30. März 2014 um 15:22 Uhr
@ user66001 spielt keine Rolle, HTML unterscheidet nicht zwischen Groß- und Kleinschreibung

– Kyle

11. September 2015 um 13:59 Uhr
@Calne – Camel Case’ng könnte die Leute denken lassen, dass es so sein muss.

– Benutzer66001

11. September 2015 um 15:22 Uhr
Ist das noch wahr? ‘onClick’ hat bei mir nicht funktioniert, aber ‘onclick’ hat es getan. Mit Chrome 47 unter Windows 7 64-Bit.

– Sujay Phadke

26. Dezember 2015 um 8:07 Uhr

Johannes Giotta

Rufen Sie die Methode nicht auf, wenn Sie die neue zuweisen onclick Handler.

Entfernen Sie einfach die Klammer:

document.getElementById("a").onclick = Foo;

UPDATE (aufgrund neuer Informationen):

document.getElementById("a").onclick = function () { Foo(param); };

Leider habe ich einen Parameter, der dort sein muss. Ändert das Ihre Antwort?

– Tony Stark

14. März 2011 um 20:15 Uhr
@hatorade: use onclick = function () { Foo(params); };

– Reid

14. März 2011 um 20:17 Uhr
@Hatorade – Ja document.getElement... function() { Foo(param);};

– Johannes Giotta

14. März 2011 um 20:18 Uhr
Vielen Dank für die Hilfe. Ich würde dir die Antwort geben, wenn ich könnte, aber Ryan hat sie ein paar Minuten früher bekommen. Entschuldigung :(. Ich habe aber +1 gegeben!

– Tony Stark

14. März 2011 um 20:22 Uhr
sollte das .onclick nicht .onClick sein?

– GlennG

15. August 2013 um 11:43 Uhr

Dank João Paulo Oliveira war dies meine Lösung, die eine Variable enthält (was mein Ziel war).

document.getElementById( "myID" ).setAttribute( "onClick", "myFunction("+VALUE+");" );

Sime Vidas

Ich empfehle diesen Ansatz:

Anstelle von zwei Click-Handlern haben Sie nur eine Funktion mit einer if-else-Anweisung. Lassen Sie den Zustand des BUTTON-Elements bestimmen, welcher Zweig der if-else-Anweisung ausgeführt wird:

HTML:

<button id="a" onclick="toggleError(this)">Button A</button>

Javascript:

function toggleError(button) { 
    if ( button.className === 'visible' ) {
        // HIDE ERROR
        button.className="";
    } else {
        // SHOW ERROR
        button.className="visible";
    }
}

Live-Demo: http://jsfiddle.net/simevidas/hPQP9/

Ich persönlich mag diese Lösung, weil sie den Code für die Schaltfläche zusammenhält (und da es sich um einen Schalter handelt, wenn Sie eine Seite aktualisieren, möchten Sie normalerweise die andere Seite aktualisieren), aber ich habe auch mit Vue gearbeitet und v-on:click verwendet , also schien die oberste Antwort für mich nicht zu funktionieren. Danke Sime!

– OhFiddleDiddle

10. September 2019 um 6:08 Uhr

Kyle

Sie könnten versuchen, das Schaltflächenattribut wie folgt zu ändern:

element.setAttribute( "onClick", "javascript: Boo();" );

Ich persönlich mag diese Lösung, weil sie den Code für die Schaltfläche zusammenhält (und da es sich um einen Schalter handelt, wenn Sie eine Seite aktualisieren, möchten Sie normalerweise die andere Seite aktualisieren), aber ich habe auch mit Vue gearbeitet und v-on:click verwendet , also schien die oberste Antwort für mich nicht zu funktionieren. Danke Sime!

– OhFiddleDiddle

10. September 2019 um 6:08 Uhr

Richard Marskell-Drackir

Was einfacher sein könnte, ist, zwei Schaltflächen zu haben und sie in Ihren Funktionen ein-/auszublenden. (dh. display:none|block;) Jede Schaltfläche könnte dann ihren eigenen Onclick mit dem Code haben, den Sie benötigen.

Also erstmal button1 wäre display:block und button2 wäre display:none. Dann, wenn Sie klicken button1 es würde wechseln button2 sein display:block und button1 sein display:none.

Perfekte Antwort! Für jemanden, der mit Javascript nicht wirklich vertraut ist, ist dies eine sehr hilfreiche Methode.

– Rolandixor

15. September 2017 um 3:37 Uhr

11369000cookie-checkÄndern Sie die Onclick-Aktion mit einer Javascript-Funktion

#Javascript