Javascript 如何使用不同按钮的id'；s

我有一个带有单个参数的箭头函数displayExtraUserInfo，我想在一个id为btn birthdate的按钮上添加一个click侦听器。侦听器应该调用displayBirthdate这个函数之外的另一个函数，并传入参数displayExtraUserInfo received

const displayExtraUserInfo = (inputData) => {

  const button1 = document.getElementById("btn-birthdate");
  button1.addEventListener("click", function () {
    displayBirthdate(inputData)
  });

  const button2 = document.getElementById("btn-phone");
  button1.addEventListener("click", function () {
    displayPhone(inputData)
  });

  const button3 = document.getElementById("btn-address");
  button1.addEventListener("click", function () {
    displayAddress(inputData)
  });

};

---

下面的代码包含两个带有电话、地址和生日的对象

单击杰克按钮时，以下三个按钮将在单击时显示杰克的信息

如果单击查理，按钮将在单击时显示查理的信息

以下是一个工作示例：

函数显示名称（inputData）{
document.getElementById（“nameSpan”）.innerHTML=inputData.name
}
函数显示出生日期（inputData）{
document.getElementById（“bdSpan”）.innerHTML=inputData.birthDate
}
功能显示电话（输入数据）{
document.getElementById（“phoneSpan”）.innerHTML=inputData.phone
}
函数显示地址（inputData）{
document.getElementById（“addressSpan”）.innerHTML=inputData.address
}
const displayExtraUserInfo=（inputData）=>{
const button1=document.getElementById（“btn名称”）；
按钮1.addEventListener（“单击”），函数（）{
显示名称（输入数据）
});
const button2=document.getElementById（“btn生日”）；
按钮2.addEventListener（“单击”），函数（）{
显示出生日期（输入数据）
});
const button3=document.getElementById（“btn电话”）；
按钮3.addEventListener（“单击”），函数（）{
显示电话（输入数据）
});
const button4=document.getElementById（“btn地址”）；
按钮4.addEventListener（“单击”），函数（）{
显示地址（输入数据）
});
document.getElementById（“nameSpan”）.innerHTML=“”
document.getElementById（“bdSpan”）.innerHTML=“”
document.getElementById（“phoneSpan”）.innerHTML=“”
document.getElementById（“addressSpan”）.innerHTML=“”
};
var插孔={
姓名：“杰克”，
地址：“芬兰”，
电话：123456789，
生日：“20/10/1987”
}
变量查理={
姓名：“查理”，
地址：“伦敦”，
电话：0987654，
出生日期：“20/11/2001”
}
document.getElementById（“btn插孔”）.addEventListener（“单击”，函数）（）{
displayExtraUserInfo（杰克）
});
document.getElementById（“btn charlie”）.addEventListener（“单击”，函数）（）{
displayExtraUserInfo（查理）
});
Jack

查理


姓名出生日期
电话地址

名称：

出生日期：

电话：

地址：
如评论所述，您的错误来自于您声明button1、button2和button3，但您在button1上绑定事件3次

这应该行得通

const displayExtraUserInfo = (inputData) => {

  const button1 = document.getElementById("btn-birthdate");
  button1.addEventListener("click", function () {
    displayBirthdate(inputData)
  });

  const button2 = document.getElementById("btn-phone");
  button2.addEventListener("click", function () {
    displayPhone(inputData)
  });

  const button3 = document.getElementById("btn-address");
  button3.addEventListener("click", function () {
    displayAddress(inputData)
  });

};

这是一个动态且完整的需求示例


/*声明*/
常量displayBirthdate=（inputData）=>{
日志（“显示出生日期：”，输入数据）
}
const displayPhone=（输入数据）=>{
log（“displayPhone:，inputData”）
}
常量显示地址=（输入数据）=>{
日志（“显示地址：”，输入数据）
}
/*设置事件*/
const displayExtraUserInfo=（inputData）=>{
常数fns=[
{id:'btn birthdate'，fn:displayborthdate}，
{id:'btn phone'，fn:displayPhone}，
{id:'btn address'，fn:displayAddress}，
]
fns.forEach（el=>{
设btn=document.getElementById（el.id）
btn&&btn.addEventListener（'单击'，（）=>{
el.fn（输入数据）
})
})
};
/*初始化*/
displayExtraUserInfo（{foo:bar}）
BirthdayPhone
你说的“它不工作”是什么意思？请详细说明。您正在声明
button1
、
button2
和
button3
，但您在
button1
上绑定事件3次。请使用本地代码片段工具，尽可能避免非现场链接。我不确定您是否理解这个问题，这与每个用户的id无关。我的答案不是“每个用户的id”。通过不同的按钮，不同的用户被设置到上下文中，然后第二级按钮可以显示他们的属性。这些类型的错误被认为是打字错误，对于打字错误，我们不发布答案，我们使用SO内置的“投票/标志以打印错误结束”因为它们对未来用户没有真正的价值。如果答案有帮助，你能接受吗？这些错误被认为是打字错误，对于打字错误，我们不发布答案，我们使用SO内置的“投票/标志以打印错误结束”，因为它们对未来用户没有真正的价值。@LGSon我同意，我已经发布了一条关于打字错误的评论，我只是在这里回复，以添加一个解决方案，在id和函数之间建立关系，以调用单击（就像问题上要求的那样），但不需要复制/粘贴代码。