CODEWITHSUNDEEP
javascriptaddeventlistenerarrow-functions
unkind_sauce1
unkind_sauce1

Reputation: 528

How to pass an argument to a function in an event listener

I am tackling a challenge, I am very new to JS and quite frankly I do not completely understand the challenge. The question I need to answer to move to the next stage is:

Step 2 Create the following 3 functions:

a displayBirthdate arrow function a displayPhone arrow function and a displayAddress arrow function These functions will be called by event listeners attached to buttons in the UI.

Step 3 Create a displayExtraUserInfo arrow function. It should take in a single parameter. It should then :

Add a click listener to the BUTTON with id of btn-birthdate. The listener should make a call to displayBirthdate and pass in the parameter displayExtraUserInfo received

Add a click listener to the BUTTON with id of btn-phone. The listener should make a call to displayPhone and pass in the parameter displayExtraUserInfo received

Add a click listener to the BUTTON with id of btn-address. The listener should make a call to displayAddress and pass in the parameter displayExtraUserInfo received

For the next 3 steps, be sure you have covered Step 1 above, then review https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6 for a primer on ES6 destructuring

Step 4 Locate the displayBirthdate function you initially defined, which took no parameter. Modify it to use object de-structuring to get just the dob property of the parameter object it will receive.

Step 5 Like in step 4, locate the displayAddress function and de-structure its parameter to get just the location property

Step 6 Like in step 4, locate the displayPhone function and de-structure its parameter to get just the phone and cell properties

Here's my code:

var displayBirthdate = ({dob = 'DOB'}) => {};
var displayPhone = ({location = 'location'}) => {};
var displayAddress = ({phone = 'phone', cell='cell'}) =>{};

var displayExtraUserInfo = (params) => { 
      document.getElementById("btn-birthdate").addEventListener("click", function(){ displayBirthdate(params)});
      }

However, I am not getting it right, is there a problem with my logic? or code? i cannot tell what i am doing wrong.

Upvotes: 0

Views: 3148

Answers (4)

golf4sp
golf4sp

Reputation: 129

This is what you are looking for (Future Andelean) #winks

This is what you are looking for (Future Andelean) #winks

      const displayBirthdate = ({dob})=>{
        //
      }
      const displayPhone = ({phone, cell})=>{
        //
      }
      const displayAddress = ({location})=>{
        //
      }

      const displayExtraUserInfo = (param) => {
        document.querySelector('#btn-birthdate').addEventListener('click', () => {
          displayBirthdate(param);
        });

        document.querySelector('#btn-phone').addEventListener('click', () => {
          displayPhone(param);
        });

        document.querySelector('#btn-address').addEventListener('click', () => {
          displayAddress(param);
        });
      };```

Upvotes: 1

OdunayoO
OdunayoO

Reputation: 21

const displayExtraUserInfo = (params) => {
            document.getElementById("btn-birthdate").addEventListener("click", ()=> {
                displayBirthdate(params)
            })

           document.getElementById("btn-phone").addEventListener("click", () => {
                displayPhone(params)
            })
            document.getElementById("btn-address").addEventListener("click", () => {
                displayAddress(params)
            })

        }

Upvotes: 1

Mac Okaba
Mac Okaba

Reputation: 66

This should solve it cornelking

const displayExtraUserInfo = (param) => {
  document.querySelector('#btn-birthdate').addEventListener('click', () => {
    displayBirthdate(param);
  });
};

Upvotes: 0

Maheer Ali
Maheer Ali

Reputation: 36564

What I get from you question is that you want to call displayBirthdate on click and want to pass the params passed in displayExtraUserInfo to displayBirthdate

var displayBirthdate = (params) => (console.log(params));
var displayPhone = ({location = 'location'}) => ({});
var displayAddress = ({phone = 'phone', cell='cell'}) =>({});

var displayExtraUserInfo = (params) => { 
      document.getElementById("btn-birthdate").addEventListener("click",
         function(){
             displayBirthdate(params)
         });
 }

displayExtraUserInfo('some data')
<button id="btn-birthdate">click me</button>

Upvotes: 1

Related Questions