Member 12931605 Ответов: 0

Как добавить дополнительные GIF-файлы в поисковую систему

Здравствуйте, я создал поисковую систему, в которой вы можете искать любую игру, и появится gif. Я пытаюсь добавить в общей сложности 6 GIF-файлов на поиск, но мне это не удавалось бесчисленное количество раз. Я надеюсь, что мой код может прояснить то, что я пытаюсь сделать, в котором я предоставил свой код ниже. Я был бы очень признателен за помощь. Спасибо



<!DOCTYPE html>
<html>
<head>
  <title>Games website</title>
</head>
<body>
  <h1> Game Search </h1>
  <div class="info">
    <p> Search  </p>
      <form class="gif-form">
        <input type="text" id="form-value" class="search-input-rounded">
        <button type="submit" class="search_button"> Search for Games </button>
        <input type="reset" id="reset_button" value="Reset">
      </form>
      <div class="rando_facts animated bounceIn">
        <img id="here_is_gif" src=""/>
      </div>
  </div>

  <!-- Link in jQuery from CDN -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

  <!-- My JavaScript -->
  <script type="text/javascript">

    // This waits for the page to load before calling our jQuery
    $( document ).ready(function(){

      // Part 1 - Collect User Input Using jQuery Click Listener note we use the class (.) of search_button
      $('.search_button').on('click', function(){

        // Collect user by grabbing the input form's value via id (#)
        var userInput = $('#form-value').val().trim();
        
        // Change the input to suit the API (ie change spaces to +)
        userInput = userInput.replace(/ /g, "+");

        // Create the Giphy API URL
        var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + userInput + "&limit=6&api_key=dc6zaTOxFJmzC";

        // Part 2 - Use AJAX to call GIPHY API (note that the .done() function waits for the API to respond)
        $.ajax({url: queryURL, method: 'GET'}).done(function(response){

          // This is the API response data. It's a JSON object of 25 gifs
          console.log(response.data);

          // For simplicity, we will take the first gif (ie. at postion 0)
          var giphyURL = response.data[0].images.fixed_height.url;
          console.log(giphyURL)

          // Now you can pass that into your "here_is_gif" <img> tag using its id (#)
          $('#here_is_gif').attr('src', giphyURL);

        });

        // Part 3 - Clear the Gif using the reset_button id (#)
        $('#reset_button').on('click', function(){
          // Grab the img using the id and change the src to empty to remove the image
          $('#here_is_gif').attr("src",'');
        })


        // If using a jQuery click listner on a Submit button, you need to return false to prevent the default page refresh
        return false;
      })
      

    });

  </script>

</body>
</html>


Что я уже пробовал:

Я попытался переключить пару кодов вокруг, но мне это не удалось, потому что я такой новичок, когда дело доходит до JavaScript, я был очень неудачен, и я был бы очень признателен, если бы кто-то мог помочь мне добавить в общей сложности 6 GIF-файлов, чтобы они отображались как типы пользователей в названии игры. Спасибо

0 Ответов