如何将参数传递给事件侦听器中的函数

Question

我正在应对一个挑战，我对 JS 很陌生，坦率地说，我并不完全理解这个挑战。进入下一阶段我需要回答的问题是：

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

这是我的代码：

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

但是，我说的不太对，是不是我的逻辑有问题？或代码？我不知道我做错了什么。

Answer 1

我从你的问题中得到的是你想在点击时调用 displayBirthdate 并且想将 displayExtraUserInfo 中传递的 params 传递给 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>

Answer 2

这应该可以解决 cornelking

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

Answer 3

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

        }

Answer 4

这就是您要找的（未来的 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);
        });
      };```

如何将参数传递给事件侦听器中的函数

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

javascript

addeventlistener

arrow-functions