如何爲每個按鈕添加功能？

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(); 

Here是的jsfiddle

Answer 4

您應該使用event delegation動態添加元素

// 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>