如何使用它們的 id 將點擊偵聽器添加到不同的按鈕

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>