Question

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

好的，所以我试图弄清楚这一点，但我认为我缺少一些东西。当我单击meetBtn时，它应该运行一个功能以在按钮上方显示一个餐食。但是，它返回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));

第二个例子是部分应用程序的例子……它很简洁，但并不立即可读。

Answer 2

javascript中的事件侦听器回调接受单个参数：基于事件的对象（请参见here）。

MouseEvent（单击）具有一个detail属性，woch可以用作obj.addEventListener("click", (e) => doSomethingWith(e.detail))

在您的情况下，Event参数对您无用，并且您要将自定义参数传递给处理程序。泰勒（Tyler）的答案向您展示了适应处理程序的方法。但是，您也可以简单地

mealBtn.addEventListener('click', init);

Click事件返回未定义，但是当我在窗口上运行load事件时，该函数有效

2 个答案: