Javascript更改按鈕和onClick問題

Question

我想在JavaScript中使用onClick事件並遇到問題。我想創建一個按鈕，當它被點擊時，它會改變它的ID，點擊處理程序和文本 - 我希望它在第一次點擊時變成一個完全不同的按鈕，但是當點擊它時恢復到原始按鈕第二次。

我的想法是爲被點擊的原始按鈕編寫一個事件處理程序，將其更改爲第二個按鈕，並將其放入函數「change（）」中。我還計劃爲正在單擊的新按鈕編寫一個單獨的事件處理程序，將其更改爲原始按鈕，並將其放入函數「changeBack（）」中。

問題是，當我點擊原始按鈕一次，更改（）被調用，並在它內部changeBack（）自動得到確切的調用，當onClick被定義爲新按鈕，正好在innerHTML之前改變。我評論了一些原始的線條，並提出警告來說明這種不需要的行爲。我想不管怎麼樣，當新按鈕被創建時點擊仍然是活動的，因此即使新按鈕從未被點擊過，也迫使它調用changeBack（）。任何對此的幫助都會很大。謝謝。

<script type="text/javascript"> 
    function change() { 
     var x = document.getElementById("button"); 
     x.id = "alternateButton"; 
     x.onClick = changeBack(); 
     x.innerHTML = "Click to Change Me Back"; 
    } 

    function changeBack() { 
     var x = document.getElementById("alternateButton"); 
     alert('hi'); 
     //x.id = "button"; 
     //x.onClick = change(); 
     //x.innerHTML = "Click Me"; 
    } 
</script> 

<button id="button" onClick="change()">Click Me</button> 

Answer 1

事件綁定到元素而不是ID屬性。當你點擊按鈕時，這兩個處理程序總是被執行。

此外，避免使用內聯事件處理程序綁定處理程序是一個好主意。

// Find the elemnt 
var btn = document.getElementById('button'); 
// Data attribuet to keep tab of whether it is clicked or not 
btn.dataset.clicked = "1"; 
// Attach event 
btn.addEventListener('click', change); 

function change() { 
    var txt = 'Click to Change Me Back'; 
    // Will give you the truthy/falsy value 
    if(!!this.dataset.clicked) { 
     this.dataset.clicked = ""; 

     // First implementation 

    } else { 
     this.dataset.clicked = "1"; 
     txt = "Click Me"; 

     // The other case 
    } 
    this.innerHTML = txt; 
} 

Check Fiddle

Answer 2

由舒尚特上面的評論讓我開始在正確的軌道上用真理儀。然而，關於鼠標的相同問題出現了 - 它捕捉鼠標的時間比我想要的要長（即使在使用onmousedown時）。正因如此，當新按鈕被創建時，舊的按鈕被替換，所以新按鈕從未被看到。另外，通過更改元素的ID，我遇到了一些非常奇怪的事情，例如，如果我使用警報，程序完全停止，並且在關閉警報後不繼續，但是當我刪除警報時，整個程序運行。我想最好是將ID單獨留下，只將它們用作參考，並使用DOM訪問而不是樣式標籤動態更改樣式，並使用按鈕通過引用switch語句中的其他函數來控制頁面的其他部分（I'我真的不熟悉JavaScript，所以我不確定它是如何完成的）。

由於這些問題，但與Sushanth的評論想法，我用兩個測試人員：其中一個目前正在顯示按鈕，一個用於按下或釋放鼠標。將代碼放在標題中而不是正文底部時，我也遇到了一些奇怪的問題。最後，我不得不使用一些自定義屬性。我希望這有助於任何想要使用按鈕的人在點擊它時來回改變外觀和功能。

<button id="button1" onmousedown="transformButton1()" onmouseup="release()">Click Me</button> 

<p id="one">One</p> 
<p id="two">Two</p> 
<p id="three">Three</p> 

<script type="text/javascript"> 
var x = document.getElementById("button1"); 
x["clicked"] = 0; 
x["released"] = 1; 

function transformButton1() { 
var x = document.getElementById("button1"); 

if (x["released"] == 1) { 
    switch (x["clicked"]) { 
     case 0: 
      x["clicked"] = 1; 
      x["released"] = 0; 
      // Other function calls to change other elements on the page, for example: 
      document.getElementById("two").innerHTML = "I've Changed!!!!!"; 
      x.innerHTML = "Click to Change Me Back"; 
      break; 

     case 1: 
      x["clicked"] = 0; 
      x["released"] = 0; 
      // Other function calls to change other elements on the page, for example: 
      document.getElementById("two").innerHTML = "Two"; 
      x.innerHTML = "Click Me"; 
      break; 
     } 
    }  
} 

function release() { 
    document.getElementById("button1")["released"] = 1; 
} 
</script> 

JSFiddle