代码之家 › 专栏 › 技术社区 › Cornelius

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

arrow-functions addeventlistener javascript

Cornelius · 技术社区 · 5 年前

我正在应对一个挑战,我对JS很陌生,坦白地说,我并不完全理解这个挑战。

步骤2创建以下3个函数:

显示地址箭头函数这些函数将由事件调用附加到用户界面按钮的侦听器。

一个参数。那么它应该:

向id为btn birthdate的按钮添加单击侦听器。这个参数displayExtraUserInfo已接收

在id为btn phone的按钮上添加一个点击监听器。听众接收到displayExtraUserInfo

向id为btn address的按钮添加单击侦听器。这个参数displayExtraUserInfo已接收

回顾 https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6 ES6解构入门

步骤4找到最初定义的displayBirthdate函数, 没有参数。修改它以使用对象去结构化来获取

步骤5和步骤4一样,找到displayAddress函数并对其参数进行反构造以仅获取位置属性

步骤6和步骤4一样,找到displayPhone功能并对其参数进行去结构处理,以便只获取电话和手机的属性

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

但是,我没有把它弄对,我的逻辑有问题吗?还是密码?我不知道我做错了什么。

0 回复 | 直到 5 年前

Okaba Mac 5 年前

这应该能解决这个问题

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

OdunayoO 5 年前

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

        }

Maheer Ali 5 年前

displayBirthdate 单击并希望传递 params displayExtraUserInfo 到 显示出生日期

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>

golf4sp 5 年前

这就是你在寻找的东西(未来和未来)

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