组合来自不同变量的数组以随机填充javascript

我正在尝试重新创建一个“今日特别”菜单，以便每次刷新页面时，都会填充不同类型的比萨饼，但在数组中具有正确的属性。所以0索引的数据都属于一起，1索引的数据属于一起，等等。这是我的代码，我尝试过，但它是从任何随机变量随机填充的。请帮忙

我想让它看起来像：“今天的特价：披萨名称+价格+描述”

HTML:

今天的特别节目
有条件的爱

JavaScript:

function randomPizzaFunction(hungry, hungrier, hungriest){
  for(var i = 0; i<hungry.length; i++){
    var displayTodaysSpecial = hungry.concat(hungrier).concat(hungriest);
    console.log(displayTodaysSpecial[i]);
  }
  return displayTodaysSpecial;
}

randomPizzaFunction(pizzaName, price, description);
var genRandomPizza = randomPizzaFunction(pizzaName, price, description);
console.log(genRandomPizza);

var changeSpecial = document.getElementById("special");
changeSpecial.innerHTML = genRandomPizza[Math.floor(Math.random() * genRandomPizza.length)];

函数随机比萨函数（饥饿、饥饿、饥饿）{
对于html中的（var i=0；i，我使用了liberty并添加了“name、price和description”元素以及id

<section id="today">
<div class="content">
  <h3 class="sectionTitle">Today's Special</h3>
  <h1 id='name'>pizza name</h1>
  <h2 id='price'>price</h2>
  <p id='dec'>description</p>
</div>

我假设您的脚本标记位于页面的末尾。如果不将代码包装在
文档中。ready
方法。
@trincot是正确的，您应该将其存储在对象数组中。如下所示

var pizza = [{
    name: 'Four Loop',
    price: 44.44,
    description: 'Spin your wheel with this quattro cheese mix doused in garlic and truffle oil. Loop there it is!'
}, {
    name: 'Conditional Love',
    price: 22.14,
    description: 'This island favorite doesn\'t give you a chance to say no. Korean bulgogi meat, kim chee, mozzarella cheese and onions always returns true! Boo~Ya!'
}];

var display = pizza[Math.floor(Math.random() * pizza.length)];

您可以使用对象构建一个数组

然后随机选择

然后使用所选比萨饼的属性进行输出


函数getRandomPizza（pizza）{
return pizza[Math.floor（Math.random（）*pizza.length）]；
}
var pizzaName=['Four-Loop'，'Conditional-Love'，'The-DOM'，'Conjunction-Function']，
价格=[44.44,22.14,16.99,17.02]，
说明=[“用这混合了大蒜和松露油的quattro奶酪旋转你的轮子。在这里循环！”，“这个岛上最受欢迎的东西不会让你有机会说不。韩国的保加利亚肉、金芝士、马苏里拉奶酪和洋葱总是回归真实！嘘~耶！”，“这种充满活力的鸭子、橄榄和芒果的混合物会改变你对比萨饼的最初想法。”应该是。唯一不变的是这个坏孩子的变化！，“通过传递手工挑选的新鲜原料来制作你自己的馅饼。激发你的食欲和创造力！妈妈咪呀，回归荣耀！”，
pizzaName.map（函数（a，i）{
返回{name:a，price:price[i]，description:description[i]}；
}),
随机披萨=随机披萨（披萨）；
['name'，'price'，'description'].forEach（函数（k）{
document.getElementById（k）.innerHTML=randomPizza[k]；
})；

今天的特别节目
$

您应该将比萨饼属性存储在每个比萨饼的一个对象中，而不是分散在不同的阵列中。当您使用不同的结构时，事情会变得容易得多：

var pizzas=[{
名称：'Four Loop'，
价格：44.44，
描述：'用大蒜和松露油浸泡的quattro奶酪混合物旋转你的轮子。在那里循环！'，
},{
名字：“有条件的爱”，
价格:22.14,，
描述：“这个岛上最受欢迎的食物不会让你有机会说不。韩国的保加利亚肉、金芝士、马苏里拉奶酪和洋葱都是真的！嘘~耶！”，
},{
名称：“DOM”，
价格:16.99，
描述：“这种鸭肉、橄榄和芒果的动态混合将改变你对比萨饼应该是什么的最初想法。对这个坏孩子来说，唯一不变的是变化！”，
},{
名称：'连接函数'，
价格：17.02，
描述：“通过传递手工挑选的新鲜原料来制作你自己的馅饼。激发你的食欲和创造力！妈妈咪呀，回归荣耀！”
}];
功能比萨饼（比萨饼）{
返回pizzas[Math.floor（Math.random（）*pizzas.length）]；
}
var pizza=随机比萨（pizzas）；
document.getElementById（“特殊名称”）.textContent=pizza.name；
document.getElementById（“特殊价格”）.textContent=pizza.price；
document.getElementById（“特殊说明”）.textContent=pizza.description；

今天的特别节目
特别：

价格：$

您不应将属性存储在单独的数组中。而是创建一个对象数组，其中每个对象都具有特定比萨饼的所有属性。您只需从这三个数组中随机选取，并每次将它们显示为一个单独的今天特备菜单。对吗？

<section id="today">
<div class="content">
  <h3 class="sectionTitle">Today's Special</h3>
  <h1 id='name'>pizza name</h1>
  <h2 id='price'>price</h2>
  <p id='dec'>description</p>
</div>

var pizzaName = ['Four Loop', 'Conditional Love', 'The DOM','Conjunction Function'];

var price = [44.44, 22.14, 16.99, 17.02];

var description = [
  'Spin your wheel with this quattro cheese mix doused in garlic and truffle oil. Loop there it is!', 
  'This island favorite doesn\'t give you a chance to say no. Korean bulgogi meat, kim chee, mozzarella cheese and onions always returns true! Boo~Ya!', 
  'This dynamic blend of Duck, Olives and Mango will change your original thought of what a pizza should be. The only thing constant is change for this bad boy!', 
  'Create your own pie by passing in handpicked fresh ingredients. Invoke your appetite and creativity! Mamma Mia return back to glory!'
];

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

var rn = getRandomInt(0,3)

document.getElementById('name').innerHTML = pizzaName[rn]
document.getElementById('price').innerHTML = price[rn]
document.getElementById('desc').innerHTML = description[rn]

var pizza = [{
    name: 'Four Loop',
    price: 44.44,
    description: 'Spin your wheel with this quattro cheese mix doused in garlic and truffle oil. Loop there it is!'
}, {
    name: 'Conditional Love',
    price: 22.14,
    description: 'This island favorite doesn\'t give you a chance to say no. Korean bulgogi meat, kim chee, mozzarella cheese and onions always returns true! Boo~Ya!'
}];

var display = pizza[Math.floor(Math.random() * pizza.length)];

[
    {
        name: "Four Loop",
        price: 44.44,
        description: "Spin your wheel with this quattro cheese mix doused in garlic and truffle oil. Loop there it is!"
    },
    {
        name: "Conditional Love",
        price: 22.14,
        description: "This island favorite doesn't give you a chance to say no. Korean bulgogi meat, kim chee, mozzarella cheese and onions always returns true! Boo~Ya!"
    },
    {
        name: "The DOM",
        price: 16.99,
        description: "This dynamic blend of Duck, Olives and Mango will change your original thought of what a pizza should be. The only thing constant is change for this bad boy!"
    },
    {
        name: "Conjunction Function",
        price: 17.02,
        description: "Create your own pie by passing in handpicked fresh ingredients. Invoke your appetite and creativity! Mamma Mia return back to glory!"
    }
]