我如何为每个按钮添加功能？

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>