Why do I have only 1 gif per page instead of multiple gifs? Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Why do I have only 1 gif per page instead of multiple gifs? without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I am new to jQuery and I am trying to figure out how I can get multiple gifs to show up on a page after typing in a keyword and clicking ‘submit’. In my api key I thought setting the number for ‘limit=10′(10 for example) is suppose to have 10 gifs per page?

$('#searchgifs').on('click', function() {
    var input = $('#search').val();
    $.get('https://api.giphy.com/v1/gifs/search?q=' + input + '&api_key=apikey&limit=10', function(response) {
      $('#img').html("<img src=" + response.data[0].images.downsized_large.url + ">")
    })
  });
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    
</head>
<body>
<input id="search" class="form-control mr-sm-2" type="text" placeholder="Search" value="">
<button class="btn btn-outline-success my-2 my-sm-0" id="searchgifs" type="submit">Search</button>
<div id="img">
    
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>   
<script src="scripts/script1.js"></script>
</body>
</html>

Answer

It seems like you have two issues: The first one is that you only set one of the results to the element, and the second is that you set the content of the element to be the content of the first result, instead of appending it. Below snippet should work .

The two changes I made:

  1. Using the $.each() function to do something with ALL of the results instead of only 1 by using an array key
  2. Using the .appendTo() function to add content to a certain element instead of setting the content. The first ADDS content, the later overwrites the current value.

$('#searchgifs').on('click', function() {
    var input = $('#search').val();
    $.get('https://api.giphy.com/v1/gifs/search?q=' + input + '&api_key=apikey&limit=10', function(response) {
      $.each(response.data, function(index, gif){
      $("<img src=" + gif.images.downsized_large.url + ">").appendTo(('#img'))
      });
      
    })
  });
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    
</head>
<body>
<input id="search" class="form-control mr-sm-2" type="text" placeholder="Search" value="">
<button class="btn btn-outline-success my-2 my-sm-0" id="searchgifs" type="submit">Search</button>
<div id="img">
    
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>   
<script src="scripts/script1.js"></script>
</body>
</html>
We are here to answer your question about Why do I have only 1 gif per page instead of multiple gifs? - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji