title: How to pass an argument to a function in an event listener
body: <p>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:</p>
  
  <blockquote>
    <p>Step 2 Create the following 3 functions:</p>
    
    <p>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.</p>
    
    <p>Step 3 Create a displayExtraUserInfo arrow function. It should take in
    a single parameter. It should then :</p>
    
    <p>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</p>
    
    <p>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</p>
    
    <p>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</p>
    
    <p>For the next 3 steps, be sure you have covered Step 1 above, then
    review
    <a href="https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6" rel="nofollow noreferrer">https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6</a>
    for a primer on ES6 destructuring</p>
    
    <p>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.</p>
    
    <p>Step 5 Like in step 4, locate the displayAddress function and
    de-structure its parameter to get just the location property</p>
    
    <p>Step 6 Like in step 4, locate the displayPhone function and
    de-structure its parameter to get just the phone and cell properties</p>
  </blockquote>
  
  <p>Here's my code:</p>
  
  <pre><code>var displayBirthdate = ({dob = 'DOB'}) =&gt; {};
  var displayPhone = ({location = 'location'}) =&gt; {};
  var displayAddress = ({phone = 'phone', cell='cell'}) =&gt;{};
  
  var displayExtraUserInfo = (params) =&gt; { 
        document.getElementById("btn-birthdate").addEventListener("click", function(){ displayBirthdate(params)});
        }
  </code></pre>
  
  <p>However, I am not getting it right, is there a problem with my logic? or code? i cannot tell what i am doing wrong.</p>