變化的onclick用JavaScript函數動作

我有一個按鈕：變化的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)"; 
}

來源

2011-03-14 sepiroth

我不是這個答案，因爲你是專門詢問有關香草JavaScript的，但你可能想看看jQuery。這是一個JavaScript庫，可以幫助你做你想要在你的問題中做的事情。 – JasCav 2011-03-14 20:12:20

瞭解JQuery，只能在這種情況下使用Javascript。謝謝。 – sepiroth 2011-03-14 20:13:28

'onclick'屬性應該全部小寫。 https://developer.mozilla.org/en/DOM/element.onclick – 2011-03-14 20:15:33

您的代碼調用函數並分配返回值的onClick，也應該是「的onclick 」。這是它應該看起來的樣子。在你的其他代碼

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

尋找你可能想要做這樣的事情：

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

來源

2011-03-14 20:14:58 Ryan

只是想補充說，瑞安不包括括號因爲它不是一個函數調用 – GoldfishGrenade 2014-11-07 04:01:31

...你可能想要做這樣的事情： .onclick = HideError; //如果這不起作用，爲什麼不呢？上面的差異是什麼答案？ – pashute 2016-06-01 04:04:49

指定新onclick處理程序時，不要調用該方法。

只需刪除括號：

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

UPDATE（由於new information）：

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

來源

2011-03-14 20:13:48

不幸的是，我有一個參數需要在那裏。這會改變你的答案嗎？ – sepiroth 2011-03-14 20:15:16

@hatorade：使用onclick = function（）{Foo（params）; }; – Reid 2011-03-14 20:17:00

@hatorade - 是'document.getElement ... function（）{Foo（param）;};' – 2011-03-14 20:18:12

我推薦這種方法：

不是有兩個點擊處理程序，有一個只有一個功能if-else語句。釋放按鈕元件的狀態確定的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'; 
    } 
}

現場演示：http://jsfiddle.net/simevidas/hPQP9/

來源

2011-03-14 20:15:31

可能更容易的是，有兩個按鈕並將它們顯示/隱藏在您的功能中。（即display:none|block;）然後每個按鈕都可以擁有自己的onclick，並且可以使用任何你需要的代碼。

因此，在第一button1是display:block和button2是display:none。然後當您點擊button1它會將button2切換爲display:block和button1爲display:none。

來源

2011-03-14 20:18:29

完美的答案！對於不熟悉JavaScript的人來說，這是一個非常有用的方法。 – RolandiXor 2017-09-15 03:37:35

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

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

來源

2011-03-14 20:23:06 Otuyh

這似乎是實現它的最好方法，儘管其他工作方式，直接向onclick添加函數可能無法在某些情況下工作。在循環中創建多個按鈕併爲循環w中的每個按鈕分配onclick函數的情況下的問題因爲不工作。它會將最後一個按鈕的功能分配給所有按鈕。使用這種方法就像一個魅力。謝謝霍爾！ – 2013-01-22 08:59:01

應該是'onclick'，而不是'onClick'。 – user66001 2014-03-30 15:22:23

@ user66001沒關係，HTML不區分大小寫 – Kyle 2015-09-11 13:59:35

你可以嘗試更改按鈕屬性如下：

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

來源

2014-11-05 17:42:08

多虧了若昂·保羅·奧利維拉，這是我的解決方案，包括一個變量（這是我的目標）。

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

來源

2017-05-08 01:44:23 TheSatinKnight

變化的onclick用JavaScript函數動作

回答

相關問題