Как передать аргумент функции в слушателе событий - PullRequest
Новая
       10

Как передать аргумент функции в слушателе событий

0 голосов
/ 12 марта 2019

Я беру вызов, я очень новичок в JS и, честно говоря, я не совсем понимаю вызов.Вопрос, на который мне нужно ответить, чтобы перейти к следующему этапу:

Шаг 2 Создайте следующие 3 функции:

функция стрелки displayBirthdate функция стрелки displayPhone и функция стрелки displayAddressЭти функции будут вызываться прослушивателями событий, прикрепленными к кнопкам в пользовательском интерфейсе.

Шаг 3 Создайте функцию стрелки displayExtraUserInfo.Он должен принимать один параметр.Затем следует:

Добавить прослушиватель кликов на КНОПКУ с идентификатором btn-birthdate.Слушатель должен сделать вызов displayBirthdate и передать параметр displayExtraUserInfo полученный

Добавить слушателя щелчка в КНОПКУ с идентификатором btn-phone.Слушатель должен сделать вызов displayPhone и передать полученный параметр displayExtraUserInfo

Добавить слушателя щелчка в КНОПКУ с идентификатором btn-address.Слушатель должен сделать вызов displayAddress и передать полученный параметр displayExtraUserInfo

. В течение следующих 3 шагов убедитесь, что вы выполнили описанный выше шаг 1, затем просмотрите https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6 учебник для начинающих по деструктуризации ES6.

Шаг 4 Найдите функцию displayBirthdate, которую вы изначально определили и не принимала никаких параметров.Измените его, чтобы использовать деструктуризацию объекта, чтобы получить только свойство dob объекта параметра, который он получит.

Шаг 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)});
      }

Однако, я не понимаю, есть ли проблема с моей логикой?или код?я не могу сказать, что я делаю неправильно.

Ответы [ 4 ]

1 голос
/ 13 марта 2019 
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)
            })

        }
0 голосов
/ 10 апреля 2019

Это то, что вы ищете (Future Andelean) # winks

Это то, что вы ищете (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);
        });
      };```
0 голосов
/ 12 марта 2019

Это должно решить это cornelking 

const displayExtraUserInfo = (param) => {
  document.querySelector('#btn-birthdate').addEventListener('click', () => {
    displayBirthdate(param);
  });
};
0 голосов
/ 12 марта 2019

Вопрос, который я получил от вас, заключается в том, что вы хотите позвонить displayBirthdate по клику и хотите передать params, переданный в displayExtraUserInfo, на 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>
...