javascript - 单击事件返回未定义，但是当我在窗口上运行加载事件时，该函数起作用

Question

我想简单地将数组中的一个词放入 DOM。单击该按钮时，它返回未定义，如果我 console.log randIndex 我得到 NaN。

好的，所以我已经尝试解决这个问题，但我想我遗漏了一些东西。当我点击 mealBtn 时，它应该运行一个函数来在按钮上方显示一个餐点。但是，它返回 undefined 并将 undefined 放入 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 函数起作用，而不是在单击按钮时起作用。

Answer 1

mealBtn.addEventListener('click', showMeal);

触发时传递给 showMeal 的参数是事件，而不是 menu

你想要一个

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

第二个是部分应用的例子……它很简洁但不能立即阅读。