Question

我有一个带有单个参数的箭头功能displayExtraUserInfo，我想向ID为btn-birthdate的按钮添加点击侦听器。侦听器应调用此函数之外的另一个函数displayBirthdate，并传递接收到的参数displayExtraUserInfo。

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

};

Answer 1

下面的代码包含两个对象，分别是电话，地址和生日。

当您单击 Jack 按钮时，下面的三个按钮将在单击时显示Jack的信息。

如果您单击 Charlie ，按钮将在单击时显示Charlie的信息。

这是一个有效的示例：

function displayName(inputData){
document.getElementById("nameSpan").innerHTML = inputData.name
}

function displayBirthdate(inputData){
document.getElementById("bdSpan").innerHTML = inputData.birthDate
}

function displayPhone(inputData){
document.getElementById("phoneSpan").innerHTML = inputData.phone
}

function displayAddress(inputData){
document.getElementById("addressSpan").innerHTML = inputData.address
}

const displayExtraUserInfo = (inputData) => {
const button1 = document.getElementById("btn-name");
button1.addEventListener("click", function () {
    displayName(inputData)
});

const button2 = document.getElementById("btn-birthdate");
button2.addEventListener("click", function () {
    displayBirthdate(inputData)
});

const button3 = document.getElementById("btn-phone");
button3.addEventListener("click", function () {
    displayPhone(inputData)
});

const button4 = document.getElementById("btn-address");
button4.addEventListener("click", function () {
    displayAddress(inputData)
});

document.getElementById("nameSpan").innerHTML=""
document.getElementById("bdSpan").innerHTML=""
document.getElementById("phoneSpan").innerHTML=""
document.getElementById("addressSpan").innerHTML=""
};



var jack = {
name: "Jack",
address: "Finland",
phone: "123456789",
birthDate: "20/10/1987"
}

var charlie = {
name: "Charlie",
address: "London",
phone: "0987654",
birthDate: "20/11/2001"
}

document.getElementById("btn-jack").addEventListener("click", function () {
displayExtraUserInfo(jack)
});

document.getElementById("btn-charlie").addEventListener("click", function () {
displayExtraUserInfo(charlie)
});

<button id="btn-jack">Jack</button><br/>
<button id="btn-charlie">Charlie</button><br/>

<hr/>

<button id="btn-name">Name</button>  <button id="btn-birthdate">Birthdate</button> 
<button id="btn-phone">phone</button> <button id="btn-address">address</button>
<hr/>
<span>Name: </span><span id="nameSpan"></span><br/>
<span>Birthdate: </span><span id="bdSpan"></span><br/>
<span>Phone: </span><span id="phoneSpan"></span><br/>
<span>Address: </span><span id="addressSpan"></span><br/>

编辑：在示例代码中，您将事件分配给button1三次。如果那只是示例中的错字而不是您的实际代码库中的错字，那么您应该提供您的代码。

Answer 2

正如评论中所说，您的错误来自于您声明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)
  });

};

这是您需求的动态且完整的示例。

/* Declare */
const displayBirthdate = (inputData) => {
  console.log("displayBirthdate :", inputData)
}
const displayPhone = (inputData) => {
  console.log("displayPhone :", inputData)
}
const displayAddress = (inputData) => {
  console.log("displayAddress :", inputData)
}

/* Setup events */
const displayExtraUserInfo = (inputData) => {
  const fns = [
   {id: 'btn-birthdate', fn: displayBirthdate},
   {id: 'btn-phone', fn: displayPhone},
   {id: 'btn-address', fn: displayAddress},
  ]
  
  fns.forEach(el => {
    let btn = document.getElementById(el.id)
    btn && btn.addEventListener('click', () => {
      el.fn(inputData)
    })
  })
};

/* Init */
displayExtraUserInfo({foo:"bar"})

<button id="btn-birthdate">Birthday</button><button id="btn-phone">Phone</button>

如何使用其ID将点击侦听器添加到不同的按钮

2 个答案: