Изменение действия onclick с помощью функции Javascript

У меня есть кнопка:

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

Когда я нажимаю эту кнопку в первый раз, я хочу, чтобы он выполнил Foo (что он делает правильно):

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

Что я хочу сделать, когда я нажимаю кнопку в первый раз, это изменить функцию onclick от Foo() до Bar(). До сих пор мне удалось достичь бесконечного цикла или вообще не иметь никаких изменений. Bar() будет выглядеть примерно так:

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

Таким образом, нажатие этой кнопки просто чередует вызвавшую функцию. Как я могу заставить это работать? В качестве альтернативы, какой лучший способ показать/скрыть полный текст сообщения? Сначала он запускается, и я предоставляю кнопку "видеть полный текст". Но когда я нажимаю эту кнопку, я хочу, чтобы пользователи могли снова нажать кнопку, чтобы удалить длинную версию текста.

Здесь полный код, если он помогает:

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

Ответы

Ответ 1

Ваш код вызывает функцию и присваивает возвращаемое значение onClick, также он должен быть "onclick". Вот как это должно выглядеть.

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

Глядя на ваш другой код, вы, вероятно, захотите сделать что-то вроде этого:

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

Ответ 2

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

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

Ответ 3

Не вызывать метод при назначении нового обработчика onclick.

Просто удалите скобки:

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

ОБНОВЛЕНИЕ (из-за новой информации):

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

Ответ 4

Я рекомендую этот подход:

Вместо двух обработчиков кликов иметь только одну функцию с инструкцией if-else. Пусть состояние элемента BUTTON определяет, какая ветвь оператора if-else выполняется:

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/

Ответ 5

Что может быть проще, это иметь две кнопки и показать/скрыть их в ваших функциях. (т.е. display:none|block;). Каждая кнопка может иметь свой собственный onclick с любым кодом, который вам нужен.

Итак, сначала button1 будет display:block, а button2 будет display:none. Затем, когда вы нажмете button1, он переключит button2 на display:block и button1 на display:none.

Ответ 6

Вы можете попробовать изменить атрибут кнопки следующим образом:

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

Ответ 7

Благодаря João Paulo Oliveira, это было мое решение, которое включает переменную (которая была моей целью).

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