Использование JS, jQuery, html и css для создания веб-приложения с API, но с проблемами с функциями кнопок

Question

Я создаю веб-поисковик, использующий Giphy API ... Но у меня проблемы с функцией кнопок. У меня встроенная кнопка, чтобы изменить формат страницы и количество поисков, чтобы показать .... Сеть работает хорошо, но кнопка не работает, я попробовал встроенный код и связывание файла, ничего не получилось, это из-за понедельника, и я работал все Неделя на нем ... Пожалуйста, помогите! Я не знаю, что я делаю не так ...

Вот код ...

enter code here

function () {
    function giphySearchEngine(keyword, limit) {
      return fetch(`http://api.giphy.com/v1/gifs/search?q=${keyword}&api_key=h5nEbFf0nz3FmKUhFMFajDQpM6ew66XF&limit=${limit}`)
        .then(response => response.json());
    }
//h5nEbFf0nz3FmKUhFMFajDQpM6ew66XF// apikey 
//https://api.giphy.com/v1/gifs/search?api_key=h5nEbFf0nz3FmKUhFMFajDQpM6ew66XF&q=&limit=18&offset=0&rating=G&lang=en
  
    function images (img) {
      let $div = $('<div class="row"></div>');
      $('<div class="col"></div>').append(img).appendTo($div);
      $('#show').append($div)
    }
  
    function resultLoad(img) {
      return new Promise((resolve, reject) => {
        img.onload = resolve;
      });
    }
  //search field text box 
    (function listenOnFormSubmit() {
      $('#searchForm').submit(async (ev) => {
        ev.preventDefault();
  
        let $input = $('#searchInput');
  
        main($input.val());
      });
       
     
    })
    ();
    async function main(keyword) {
      const result = await giphySearchEngine(keyword);
      $('#show').html('');    
      
      let promises = [];
      result.data.forEach(gif => {
         let img = new Image();
         img.src = gif.images.original.url;
         promises.push(resultLoad(img));
        images (img);
      });
       //Gif limit buttons
     $('#btn6').on('click', function() {
        console.log('Get me 6 results!');
        giphySearchEngine(keyword, 6);
      });
    
      $('#btn12').on('click', function() {
        console.log('Get me 12 results!');
        giphySearchEngine(keyword, 12);
      });
    
      $('#btn18').on('click', function() {
        console.log('Get me 18 results!');
        giphySearchEngine(keyword, 18);
      });
    }
  })();

/* font */
body{
font-family:
'Bangers', cursive;
color:#393e46;
}
/* color layout */
.background{
    color:#f7f7f7;
}
div.input-group {
    width: auto;
}

  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .col {
      flex: 50%;
      max-width: 50%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .col {
      flex: 100%;
      max-width: 100%;
    }
  }
  

footer {
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #EEEEEE;
    color: #393e46;
    text-align: right;
   
  }

Answer 1

Редактировать: Ваша текущая реализация не читает результаты

     $('#btn6').on('click', async function() {
        console.log('Get me 6 results!');
        const newResults = await giphySearchEngine(keyword, 6);
        // Do nothing with new results.

      });

Вы разрешили только первое поисковое обещание. Вам нужно разрешить каждый поисковый запрос и l oop просмотреть результаты.

Попробуйте инкапсулировать его в функцию

async function main(keyword) {
    async function search(keyword) {
      const result = await giphySearchEngine(keyword);
      $('#show').html('');    

      let promises = [];
      result.data.forEach(gif => {
         let img = new Image();
         img.src = gif.images.original.url;
         promises.push(resultLoad(img));
        images (img);
      });
    }
}