how to add a click listener to different buttons using their id's

Question

i have this arrow function displayExtraUserInfo with a single parameter and i want to Add a click listener to a BUTTON with id of btn-birthdate. The listener should make a call to displayBirthdate another function outside this function and pass in the parameter 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)
  });

};

Answer 1

Below code contains two objects with phone, address and birthdate.

When you click Jack button the below three buttons will display Jack's information on click.

If you click Charlie , the buttons will display Charlie's information on click.

Here is a working example:

 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/>

---

Edit: In your sample code you are assigning the event to button1 three times. If that is only a typo in the sample and not in your actual code base, then you should provide your code.

Answer 2

As say on comment, your error came from you're declaring button1, button2 and button3 but you're binding event 3 times on the button1.

This should works fine.

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

};

This is a dynamic and completed example of your needs.

 /* 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>