如何在javascript中添加點擊事件按鈕？

<html> 
<body> 
<input type="text" id="number"/> 
<input type="button" value="create button" onclick="createbtn()"/> 
<br> 
<script> 
function createbtn() 
{ 
    var n=document.getElementById("number").value; 

    for(i=1;i<=n;i++) 
    { 
    var x = document.createElement("INPUT"); 
    x.setAttribute("type", "button"); 
    x.setAttribute("value", i); 
    x.setAttribute("id","x"+i); 
    document.body.appendChild(x); 
    document.getElementById("x"+i).onclick=function(){rotate(i)};    
    } 
} 

function rotate(p) 
    { 
    var n=document.getElementById("number").value; 
    var j=n; 
    var k=0; 

    for(i=n;i>p;i--) 
    { 
    document.getElementById("x"+i).value=i-p; 
    } 
    for(i=1;i<=p;i++) 
    { 
    document.getElementById("x"+i).value=(j-(p-1))+k; 
    k++; 
    } 
    } 

</script> 
</body> 
</html>

在上面的代碼中，我正在嘗試創建的按鈕的數量等於文本字段中輸入的數字，然後向這些按鈕添加一個點擊事件，以便當它們被點擊時，每個按鈕的值是旋轉。我用於獲取onclick事件的方法無法正常工作。幫我！！如何在javascript中添加點擊事件按鈕？

來源

2016-07-20 sagar

這是在循環使用閉包的經典錯誤。閱讀關於您的代碼的https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures。 –

這裏有幾個問題。

1）使用有意義的變量名稱。 x和p幾乎沒有任何指示性，當你回到代碼並想知道他們做了什麼時，會使生活變得困難。（他們也阻礙了人們想幫你的堆棧溢出，誰必須先解釋它們。）

2）你不需要做document.getElementById("x"+i).onclick - 你已經在x到按鈕的引用，因此你可以做x.onclick。

3）通常，不要使用DOM-0事件（例如.onclick）。這些只允許每種類型中的一種，而且不易管理。相反，使用.addEventListener()。

4）根據@Alex Kudryashev的評論，您正在嘗試引用異步閉包中的迭代變量，這是常見的初學者錯誤。換句話說，在運行rotate()時，p將始終評估爲最後一個值i，因爲它發生在循環結束後。相反，您需要在綁定事件處理程序時傳遞i的運行時副本。這可以在返回事件處理程序的立即執行函數的幫助下完成。（這可能是，如果你是新來的JS，因此這個答案的範圍之外就有點犯難了。你看它，雖然）。

5）不是分別結合到每一個按鈕，看看事件代表團。這使得您的代碼更加高效，並且在處理大量元素和事件時可以提高性能。

總而言之，試試這個：

x.addEventListener('click', (function(i_local_copy) { return function() { 
    rotate(i_local_copy); 
}; })(i));

來源

2016-07-20 18:13:52 Utkanos

謝謝！它運作良好。但我對我的要求有一定的修改。如果我想爲每個按鈕添加相同的功能，並且每次單擊任何按鈕時本地副本的值都必須遞增。你能幫助我嗎？ – sagar

我不確定你的意思。您應該爲此提出一個單獨的問題，因爲這與您的原始問題背道而馳。 – Utkanos

如何在javascript中添加點擊事件按鈕？

回答

相關問題