CODEWITHSUNDEEP
javascripthtmlrandom
josephl
josephl

Reputation: 53

HTML and JS random generator from nested array

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

  1. 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.
  2. 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!

Upvotes: 0

Views: 357

Answers (2)

Isaac.mm
Isaac.mm

Reputation: 76

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>

Upvotes: 2

Asaf
Asaf

Reputation: 1564

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>

Upvotes: 1

Related Questions