Javascript 如何向每个按钮添加功能？

代码的第一部分工作正常，但现在每个按钮都出现了，我如何为每个按钮添加功能？目前，按下按钮时唯一能做某事的按钮总是最后一个，其余按钮什么也不做。

将其更改为

{

                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");
                    });
                }
}

{
var输出=”；
var data=JSON.parse（e.target.responseText）；
对于（var i=0；i
{
警报（“测试”）；
});
}
}

您正在为循环添加以下代码

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

---

将上述代码保留在for循环中。因此，对于每个按钮，都将添加事件侦听器。

另一种方法是将回调函数添加到元素原型的

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

函数doStuff（）{
var输出=”；
var data=JSON.parse（e.target.responseText）；
对于（变量i=0；i{
//在这里填写箭头函数。。。
警报（“测试”）；
};
p、 追加子项（按钮）；
儿童组（p）；
};
}
doStuff（）；

是用于动态添加元素的JSFIDLE

//示例数据
风险值数据=[{
标题：“一”
}, {
标题：“两个”
},{
标题：“三”
}];
var输出=”；
对于（变量i=0；i

显示
Execute
按钮。addEventListener（…）
在循环中而不是在循环之后。如果你没有使用完全任意的缩进，你可能会更清楚地看到程序流程中的错误。很抱歉，我现在已经整理好了，似乎当我这样做时，java脚本的第一位不再做任何事情。唯一的问题是，当我将它全部添加到循环中时javascript停止工作