Ändern Sie die On-Click-Aktion mit einer Javascript-Funktion

Ich habe einen Knopf:

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

Wenn ich zum ersten Mal auf diese Schaltfläche klicke, soll Foo ausgeführt werden (was korrekt ausgeführt wird):

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

Wenn ich zum ersten Mal auf die Schaltfläche klicke, möchte ich die Onclick-Funktion von Foo()auf ändern Bar(). Bisher konnte ich nur eine Endlosschleife oder gar keine Änderung erreichen. Bar()würde ungefähr so ​​aussehen:

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

Wenn Sie also auf diese Schaltfläche klicken, wird nur abgewechselt, welche Funktion aufgerufen wird. Wie kann ich das zum Laufen bringen? Was ist alternativ eine bessere Möglichkeit, den vollständigen Text eines Beitrags ein- oder auszublenden? Es beginnt ursprünglich kurz und ich biete eine Schaltfläche, um "den vollständigen Text zu sehen". Wenn ich jedoch 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, wenn 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)";
}

Ihr Code ruft die Funktion auf und weist onClick den Rückgabewert zu. Außerdem sollte er 'onclick' sein. So sollte es aussehen.

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

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

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

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

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

Rufen Sie die Methode nicht auf, wenn Sie den neuen onclickHandler zuweisen .

Entfernen Sie einfach die Klammer:

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

UPDATE (aufgrund neuer Informationen ):

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

Ich empfehle diesen Ansatz:

Verwenden Sie anstelle von zwei Klick-Handlern nur eine Funktion mit einer if-else-Anweisung. Lassen Sie den Status 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/

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+");" );

Sie können versuchen, das Schaltflächenattribut folgendermaßen zu ändern:

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

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 kann dann einen eigenen Klick mit dem von Ihnen benötigten Code haben.

Also button1wäre display:blockund button2wäre es zuerst display:none. Wenn Sie dann auf klicken, wechselt button1es button2zu sein display:blockund button1zu sein display:none.

Für jeden wie mich, der versucht, eine Abfragezeichenfolge für die Aktion festzulegen, und sich fragt, warum sie nicht funktioniert.

Sie können keine Abfragezeichenfolge für eine GET-Formularübermittlung festlegen, aber ich habe festgestellt, dass dies für einen POST möglich ist.

Für eine GET-Übermittlung müssen Sie die Werte in versteckten Eingaben festlegen, z

Eine Aktion von: "/handleformsubmission?foo=bar" wäre als verstecktes Feld hinzugefügt worden wie:<input type="hidden" name="foo" value="bar" />

Dies kann dynamisch in JavaScript hinzugefügt werden als (wobei clickedButton die übermittelte Schaltfläche ist, auf die geklickt wurde:

var form = clickedButton.form;
var hidden = document.createElement("input");
hidden.setAttribute("type", "hidden");
hidden.setAttribute("name", "foo");
hidden.setAttribute("value", "bar");
form.appendChild(hidden);

Weitere Informationen zum Senden eines GET-Formulars mit Abfragezeichenfolgenparametern und ausgeblendeten Parametern finden Sie in dieser Frage