我如何為每個按鈕添加功能？

Question

代碼的第一部分工作正常，但是現在每個按鈕都出現了，我如何為每個按鈕添加功能？ 目前唯一一個按下時執行某事的按鈕總是最后一個，其余的什么都不做。

Answer 1

將其更改為

{

                var output = ""; 
                var data = JSON.parse(e.target.responseText);
                   for(var i=0; i<data.length; i++) 
                {
                    output  = data[i].title + ' ';
                    var p = document.createElement("p");
                    var div = document.getElementById("response");
                    var textNode = document.createTextNode(output);
                    p.appendChild(textNode);
                    var button = document.createElement("button");
                        button.innerHTML = "Download";
                        p.appendChild(button);

                    div.appendChild(p);
                    button.addEventListener ("click", () => 
                    {
                        alert("Test");
                    });
                }
}

Answer 2

您正在 for 循環之外添加以下代碼

button.addEventListener ("click", () => 
 { 
    alert("Test");
 } );

將上述代碼保留在 for 循環中。 這樣對於每個按鈕，都會添加事件偵聽器。

Answer 3

解決此問題的另一種方法是將回調函數添加到元素原型的onclick變量中：

 function doStuff() {
   var output = "";
   var data = JSON.parse(e.target.responseText);
   for (var i = 0; i < data.length; i++) {
     output = data[i].title + ' ';
     var p = document.createElement("p");
     var div = document.getElementById("response");
     var textNode = document.createTextNode(output);
     p.appendChild(textNode);
     var button = document.createElement("button");
     button.innerHTML = "Download";

     // Adds the callback function here
     button.onclick = () => {
       // fill in your arrow function here...
         alert("Test");
     };
     p.appendChild(button);
     div.appendChild(p);
   };
 }

doStuff();

這是一個jsFiddle

Answer 4

您應該對動態添加的元素使用事件委托

 // sample data var data = [{ title: 'one' }, { title: 'two' },{ title: 'three' }]; var output = ""; for (var i = 0; i < data.length; i++) { var output = data[i].title + " "; var p = document.createElement("p"); var div = document.getElementById("response"); var textNode = document.createTextNode(output); p.appendChild(textNode); var button = document.createElement("button"); // added output to button text for identification button.innerHTML = output + " Download"; p.appendChild(button); div.appendChild(p); } // Get the parent element, add a click listener document.getElementById("response").addEventListener("click", function(e) { // e.target is the clicked element! // If it was a button if (e.target && e.target.nodeName == "BUTTON") { // Button found! Output the identifying data! // do other work on click document.getElementById("display").innerHTML = e.target.innerHTML + " Clicked"; } });

 <div id="response"></div> <div id="display">Display</div>