Блог

Главная - Вопросы по программированию - 2 разные кнопки, каждая генерирует случайный из 2 разных уникальных списков

2 разные кнопки, каждая генерирует случайный из 2 разных уникальных списков

#javascript #html #jquery #random

#javascript #HTML #jquery #Случайный

Вопрос:

Я создаю генератор случайного приема пищи. Если вы нажмете завтрак, будет сгенерировано случайное блюдо для завтрака со ссылкой на рецепт. У меня все работает для кнопки завтрака. Однако, когда я пытаюсь повторить тот же процесс для кнопки обеда, я получаю ошибки. Похоже, что index.js возникают проблемы с различением функций.

Итак, в принципе, кнопка завтрака отлично работает с breakfastlist.js но я не могу понять, как заставить кнопку обеда извлекаться из lunchlist.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 amp; 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

Ответ №1:

Вы могли бы дублировать код, но другим решением является повторное использование существующего кода и его соответствующая настройка путем передачи объекта list в качестве другого параметра.

 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);
});

Комментарии:

1. Спасибо, это очень просто, теперь я буду знать на будущее!

Ответ №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);