单击事件返回undefined，但当我在窗口上运行load事件时，该函数可以工作
单击事件返回undefined，但当我在窗口上运行load事件时，该函数可以工作
提问于 2019-06-13 00:58:22
我试图简单地将数组中的一个单词放入DOM中。单击该按钮时，它将返回undefined，如果我对randIndex执行console.log操作，则会得到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函数起作用，而不是在单击按钮时起作用。
回答 2
Stack Overflow用户
发布于 2019-06-13 01:01:14
mealBtn.addEventListener('click', showMeal);触发此操作时传递给showMeal的参数是事件，而不是menu
你想要哪一个
mealBtn.addEventListener('click', () => showMeal(menu));
// or
mealBtn.addEventListener('click', showMeal.bind(null, menu));第二个是局部应用的例子……它很简洁，但并不是马上就能读懂的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56567103
复制相关文章
相似问题