首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >单击事件返回undefined,但当我在窗口上运行load事件时,该函数可以工作

单击事件返回undefined,但当我在窗口上运行load事件时,该函数可以工作
EN

Stack Overflow用户
提问于 2019-06-13 00:58:22
回答 2查看 46关注 0票数 2

我试图简单地将数组中的一个单词放入DOM中。单击该按钮时,它将返回undefined,如果我对randIndex执行console.log操作,则会得到NaN

好的,我试着解决这个问题,但是我想我遗漏了一些东西。当我点击mealBtn时,它应该会运行一个函数,在按钮上方显示一个饭菜。但是,它返回undefined并将undefined放入DOM中。最让我困惑的是,如果我在window.load上运行一个初始化函数,它会做它应该做的事情。

代码语言:javascript
复制
    //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函数起作用,而不是在单击按钮时起作用。

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56567103

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档