Событие щелчка возвращает неопределенное, но когда я запускаю событие загрузки в окне, функция работает - PullRequest
Новая
       18

Событие щелчка возвращает неопределенное, но когда я запускаю событие загрузки в окне, функция работает

2 голосов
/ 12 июня 2019

Я пытаюсь просто вставить слово из моего массива в DOM. Когда кнопка нажата, она возвращает неопределенное значение, и если я console.log randIndex, я получаю NaN.

Хорошо, я пытался это выяснить, но мне кажется, что я что-то упустил. Когда я нажимаю на еду, она должна запускать функцию, чтобы показывать еду над кнопкой. Тем не менее, он возвращает неопределенное и помещает неопределенное в DOM. Больше всего меня смущает то, что если я запускаю функцию инициализации в window.load, она делает именно то, что и должна. 

    //load an item from menu on window load
    window.addEventListener('load', init);

    const mealBtn = document.getElementById('mealBtn');
    const currentMeal = document.getElementById('current-meal');
    const message = document.getElementById('message');

    const menu = [
      'Macaroni',
      'Burgers',
      'Chili',
      'Breakfast',
      'Chicken',
      'Take Out?'
    ];

    function init(){
      showMeal(menu);
    }

    mealBtn.addEventListener('click', showMeal);

    //show a meal from menu array
    function showMeal(menu){
      const randIndex = Math.floor(Math.random() * menu.length);
      currentMeal.innerHTML = menu[randIndex];
      message.innerHTML = 'How about this?';
      message.style.color = '#003b6f'
    };

Я ожидаю, что когда я нажимаю кнопку, она должна давать подсказку меню в DOM прямо над кнопкой. Он работает в функции init, когда окно загружается, а не при нажатии кнопки.

Ответы [ 2 ]

1 голос
/ 12 июня 2019 
mealBtn.addEventListener('click', showMeal);

аргумент, передаваемый showMeal, когда это срабатывает, является событием, а не menu

вы хотите либо 

mealBtn.addEventListener('click', () => showMeal(menu));
// or
mealBtn.addEventListener('click', showMeal.bind(null, menu));

Второй пример частичного применения ... он краткий, но не совсем сразу читаемый.

0 голосов
/ 12 июня 2019

Обратный вызов слушателя событий в javascript принимает один параметр: объект, основанный на событии (см. здесь ).

MouseEvent (щелчок) имеет свойство detail , чья можетиспользовать как obj.addEventListener("click", (e) => doSomethingWith(e.detail))

В вашем случае параметр Event вам не нужен, и вы хотите передать пользовательские параметры обработчику.Ответ Тайлера показывает вам, как адаптировать обработчик.Тем не менее, вы также можете просто 

mealBtn.addEventListener('click', init);
...