2 个不同的按钮，每个按钮从 2 个不同的唯一列表中随机生成答案

【问题标题】：2 different buttons, each generates random from 2 different unique list2 个不同的按钮，每个按钮从 2 个不同的唯一列表中随机生成
【发布时间】：2021-01-01 10:46:01
【问题描述】：

我正在创建一个随机膳食生成器。如果您单击早餐，则会生成带有食谱链接的随机早餐食品。我为早餐按钮准备了一切。但是，当我尝试为午餐按钮复制相同的过程时，我得到了错误。 index.js 似乎在区分功能时遇到了问题。

所以基本上，早餐按钮可以从早餐列表.js 中提取，但我不知道如何让午餐按钮从午餐列表.js 中提取。如果有人能指导我如何做到这一点，我将不胜感激。

*目前我没有从 lunchlist.js 中提取代码，因为它破坏了其他所有内容。

breakfastlist.js

var breakfastlist = [
      {
        idMeal: 1,
        mealName: 'Yogurt Parfait',
        mealLink: 'https://www.tasteofhome.com/recipes/rise-and-shine-parfait/'
      },
      {
      idMeal: 2,
      mealName: 'Avocado 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/'
      },
     ];

export { breakfastlist }

lunchlist.js

var lunchlist = [
  {
        idMeal: 1,
        mealName: 'Pasta Salad',
        mealLink: 'https://www.loveandlemons.com/pasta-salad/'
  },
  {
        idMeal: 2,
        mealName: 'Black Bean and Quinoa Salad',
        mealLink: 'https://sweetpeasandsaffron.com/refreshing-quinoa-black-bean-salad/'
  }
];

export { lunchlist }

index.js

// Import stylesheets
import './style.css';
import {
  breakfastlist
} from './lists/breakfastlist.js';
import {
  lunchlist
} from './lists/lunchlist.js';

function rotateb() {
  var random_num = Math.floor(Math.random() * breakfastlist.length);
  add(random_num);
}

function add(i) {
  var chi = document.createElement('a');
  chi.textContent = breakfastlist[i].mealName;
  chi.setAttribute('href', breakfastlist[i].mealLink);
  var tab1 = document.getElementById("message");
  if (tab1.hasChildNodes()) {
    tab1.removeChild(tab1.firstChild);
  }
  tab1.appendChild(chi);
}

document.getElementById('breakfast_btn').addEventListener('click', rotateb);

index.html

<script type="module" src="breakfastlist.js"></script>
<script type="module" src="index.js"></script>
<script type="module" src="lunchlist.js"></script>

<head>
  <link rel="stylesheet" href="style.css">
</head>


<table align=center>
  <tr>
    <td align=center style=font-size:20pt>
      <b>Can't Make a Decison?</b>
    </td>
  </tr>
  <tr>
    <td align=center>
      click button to stop being grr
    </td>
  </tr>
  <tr>
    <td align=center>
      <a href="#" id="breakfast_btn" class="isbreakfastbutton" onclick=>Breakfast ????</a></td>
  </tr>
  <tr>
    <td align=center>
      <a href="#" id="lunch_btn" class="islunchbutton">Lunch ???? </a></td>
  </tr>
  <tr>
    <td align=center>
      <a href="#" id="dinner_btn" class="isdinnerbutton">Dinner ????</a></td>
  </tr>
  <tr>
    <td align=center>
      <a href="#" id="snacks_btn" class="issnacksbutton">Snacks ????</a></td>
  </tr>
  <tr>
    <td align=center>
      <a href="#" id="treats_btn" class="istreatsbutton">Treats ????</a></td>
  </tr>
  <tr>
    <td align=center>
      <a href="#" class="isbutton" onclick="resetForm()">Clear</a>
    </td>
  </tr>
  <tr>
    <td align=center>
      <p id="message"></p>
    </td>
  </tr>
</table>

<script>
  function resetForm() {
    document.getElementById("message").innerHTML = "";
  }
</script>

链接到最终结果

https://meal-generator-kjhxn3.stackblitz.io

【问题讨论】：

标签： javascript html jquery random

【解决方案1】：

您可以复制代码，但另一种解决方案是重用现有代码并通过将列表对象作为另一个参数进行相应调整。

function rotate(source) {
    var random_num = Math.floor(Math.random() * source.length);
    add(random_num, source);
}

function add(i, source) {
 var chi = document.createElement('a');
 chi.textContent = source[i].mealName;
 chi.setAttribute('href', source[i].mealLink);
 var tab1 = document.getElementById("message");
 if (tab1.hasChildNodes()) {
  tab1.removeChild(tab1.firstChild);
 }
 tab1.appendChild(chi);
} 

document.getElementById('breakfast_btn').addEventListener('click', function(e){
     e.preventDefault();
     rotate(breakfastlist);
});

document.getElementById('lunch_btn').addEventListener('click', function(e){
     e.preventDefault();
     rotate(lunchlist);
});

【讨论】：

谢谢，超级简单，以后就知道了！

【解决方案2】：

你也可以试试

 // Import stylesheets
import './style.css';
import {breakfastlist} from './lists/breakfastlist.js';
import {lunchlist} from './lists/lunchlist.js';

function rotateb() {
var id = this.id;
switch(id){
  case 'breakfast_btn':
     var random_num = getRandom(breakfastlist);
     add(random_num,breakfastlist);
     break;
  case 'lunch_btn':
      var random_num = getRandom(lunchlist);
      add(random_num,lunchlist);
      break;
    
} 

}
function getRandom(list){
  return Math.floor(Math.random() * list.length);
}
function add(i,list) {
 var chi = document.createElement('a');
 chi.textContent = list[i].mealName;
 chi.setAttribute('href', list[i].mealLink);
 var tab1 = document.getElementById("message");
 if (tab1.hasChildNodes()) {
  tab1.removeChild(tab1.firstChild);
 }
 tab1.appendChild(chi);
}

document.getElementById('breakfast_btn').addEventListener('click', rotateb);
document.getElementById('lunch_btn').addEventListener('click', rotateb);

【讨论】：