HTML and JS random generator from nested array

Question

I'm trying to make a random meal generator, where you click a button and a random option with the name and a link to the recipe comes up.

You can see what I've done so far here 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>

This is the article I am sort of basing it on if that helps (without using an API and having multiple buttons) https://www.freecodecamp.org/news/creating-a-random-meal-generator/

I am just testing the breakfast button for now but I am running into problems

Originally, I was going to create the breakfastlist array in a separate JS file and then link it over but I struggled with that so decided to just see if the button would work in the same JS file first.
However, now it just generates an undefined message.

So if someone could help point me in the right direction to get the button working, and potentially help with creating the array in a different JS file that'd be great!

Any help is appreciated, thanks!

Isaac.mm · Accepted Answer · 2020-09-13 19:29:29Z

I put onclick event to all button and I change the JS a little bit. I hope you like it.

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>

Asaf · Accepted Answer · 2020-09-13 18:33:23Z

1

You have one typo -

breakfast.length

instead of

breakfastlist.length

One more thing I've changed is: random.mealName instead of just 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>

answered Sep 13, 2020 at 18:33

Asaf

1,59211 silver badges17 bronze badges

2 Comments

josephl Over a year ago

Haha whoops thanks! But now I'm getting [object Object]

Asaf Over a year ago

You should use document.getElementById("message").innerHTML=random.mealName, currently you are printing the whole object. Also, see my working demo in the snippet above...

Collectives™ on Stack Overflow

HTML and JS random generator from nested array

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related