来自嵌套数组的 HTML 和 JS 随机生成器

Question

我正在尝试制作一个随机膳食生成器，您可以在其中单击一个按钮，然后会出现一个带有名称和食谱链接的随机选项。

你可以在这里看到我到目前为止所做的https://codepen.io/jgl02/pen/OJNEPvE

let breakfastlist = [
      {
        idMeal: 1,
        mealName: 'Yogurt Parfait',
        mealLink: 'https://www.tasteofhome.com/recipes/rise-and-shine-parfait/'
      },
      {
      idMeal: 2,
      mealName: 'Avacado Toast & Eggs',
      mealLink: 'https://www.favfamilyrecipes.com/open-face-avocado-egg-sandwich/#wprm-recipe-container-19935'
      },  
      {
        idMeal: 3,
        mealName: 'Oatmeal and Fruit',
        mealLink: 'https://healthyfitnessmeals.com/fruit-and-oatmeal-breakfast-bowl/'
      },
     ];

function GetValue()
{
    var random = breakfastlist[Math.floor(Math.random() * breakfast.length)];
    //alert(random);
    document.getElementById("message").innerHTML=random;
}

<div class = "container">
    <div class = "row text-center">
      <h3>
        Can't Make a Decison
      </h3>
      <h5>
        Click the buttons for meal ideas
      </h5>
      <input type = "button" id="breakfast" value="Breakfast ????" onclick="GetValue();"/>
      <button class = "button primary" id="lunch">Lunch ????</button>
       <button class = "button primary" id="dinner">Dinner ????</button>
      <p id="message" ></p>
  </div>
</div>

如果有帮助（不使用 API 并且有多个按钮）https://www.freecodecamp.org/news/creating-a-random-meal-generator/

我现在只是在测试早餐按钮，但我遇到了问题

1. 最初，我打算在一个单独的 JS 文件中创建 breakfastlist 数组，然后将其链接起来，但我为此苦苦挣扎，所以决定只查看按钮是否可以在同一个 JS 文件中工作首先。
2. 但是，现在它只会生成一条未定义的消息。

因此，如果有人可以帮助我指出正确的方向以使按钮正常工作，并可能帮助我在不同的 JS 文件中创建数组，那就太好了！

感谢任何帮助，谢谢！

Answer 1

我将 onclick 事件放在所有按钮上，并稍微更改了 JS。 希望你喜欢。

let breakfastlist = [{
    idMeal: 1,
    mealName: 'Yogurt Parfait',
    mealLink: 'https://www.tasteofhome.com/recipes/rise-and-shine-parfait/'
  },
  {
    idMeal: 2,
    mealName: 'Avacado Toast & Eggs',
    mealLink: 'https://www.favfamilyrecipes.com/open-face-avocado-egg-sandwich/#wprm-recipe-container-19935'
  },
  {
    idMeal: 3,
    mealName: 'Oatmeal and Fruit',
    mealLink: 'https://healthyfitnessmeals.com/fruit-and-oatmeal-breakfast-bowl/'
  },
];

function GetValue() {
  var random_num = Math.floor(Math.random() * breakfastlist.length);
  var random =  breakfastlist[random_num].mealName + "<br>" + breakfastlist[random_num].mealLink;
  document.getElementById("message").innerHTML = random;
}

<div class="container">
  <div class="row text-center">
    <h3>
      Can't Make a Decison
    </h3>
    <h5>
      Click the buttons for meal ideas
    </h5>
    <input type="button" id="breakfast" value="Breakfast ?" onclick="GetValue();" />
    <button class="button primary" id="lunch" onclick="GetValue();">Lunch ?</button>
    <button class="button primary" id="dinner" onclick="GetValue();">Dinner ?</button>
    <p id="message"></p>
  </div>
</div>

Answer 2

你有一个错字-

breakfast.length

而不是

breakfastlist.length

我更改的另一件事是：random.mealName 而不仅仅是 random...

let breakfastlist = [
      {
        idMeal: 1,
        mealName: 'Yogurt Parfait',
        mealLink: 'https://www.tasteofhome.com/recipes/rise-and-shine-parfait/'
      },
      {
      idMeal: 2,
      mealName: 'Avacado Toast & Eggs',
      mealLink: 'https://www.favfamilyrecipes.com/open-face-avocado-egg-sandwich/#wprm-recipe-container-19935'
      },  
      {
        idMeal: 3,
        mealName: 'Oatmeal and Fruit',
        mealLink: 'https://healthyfitnessmeals.com/fruit-and-oatmeal-breakfast-bowl/'
      },
     ];

function GetValue()
{
    var random = breakfastlist[Math.floor(Math.random() * breakfastlist.length)];
    document.getElementById("message").innerHTML=random.mealName;
}

<div class = "container">
    <div class = "row text-center">
      <h3>
        Can't Make a Decison
      </h3>
      <h5>
        Click the buttons for meal ideas
      </h5>
      <input type = "button" id="breakfast" value="Breakfast ?" onclick="GetValue();"/>
      <button class = "button primary" id="lunch">Lunch ?</button>
       <button class = "button primary" id="dinner">Dinner ?</button>
      <p id="message" ></p>
  </div>
</div>