如何使每个创建的按钮的详细信息被引用到每个数据答案

【问题标题】：How to make each created buttons for detail to be refered to each data如何使每个创建的按钮的详细信息被引用到每个数据
【发布时间】：2020-07-23 17:36:36
【问题描述】：

我正在使用 firebase 将数据检索到 html 页面上，我希望它能够将名称作为列表打印在 html 上，并将按钮附加到 firebase 中的每个名称旁边，以及每个按钮，当点击后，显示与该名称关联的地址和电子邮件。

到目前为止，我已经让它工作了，除了附加的按钮都对相同的最后一个数据输入发出警报。如何使它与正确的名称相关联？

这是我在 firebase 上的数据：地址簿-6d9e9 信息 -MCqyNHtvbuQxlYrp6Qz 地址： “测试地址” 电子邮件： “测试邮件” 姓名： “测试” -MCr3jCuPQ4MwOEYCDwS 地址： “测试地址2” 电子邮件： “testemail2” 姓名： “测试2” -MCtJKw6iqflovcl1NEJ 地址： “测试地址3” 电子邮件： “testemail3” 姓名： “测试3”

function getData(data) {
var database=firebase.database();
var rootRef=database.ref("information");
rootRef.on("value",gotData,errData);
}

function gotData(data){
//console.log(data.val());
var information = data.val();
var keys = Object.keys(information);
//console.log(keys);
for (var i = 0; i < keys.length; i++) {
    var k = keys[i];
    var name = information[k].name;
    var email = information[k].email;
    var address = information[k].address;
    console.log(name,email,address);                
    var node = document.createElement("LI");
    var textnode = document.createTextNode(name);
    node.appendChild(textnode);
    var buttonNode = document.createElement("BUTTON");
    buttonNode.innerHTML="Click for Details";
    buttonNode.addEventListener('click',() =>{
    alert("the email is: " + email + " and address is: " + address);
    });
    var retrievedName = document.getElementById("wow").appendChild(node).appendChild(buttonNode);
}
}

【问题讨论】：

标签： javascript firebase

【解决方案1】：

我首选的解决方案是使用数据属性来存储按钮本身的信息。

所以在var buttonNode 行之后添加以下行。

buttonNode.setAttribute("data-email",email);
buttonNode.setAttribute("data-address",address);

然后将您的点击处理程序替换为：

buttonNode.addEventListener('click',(e) =>{
     var btn = e.target;
     alert("the email is: " + btn.getAttribute("data-email") + " and address is: " + btn.getAttribute("data-address"));
});

【讨论】：