Make gifs appear on a button click

Question

I am trying to make a page that has an array of "topics". Each topic has a button, and when pressed, gifs about the topic appear on the page. The user can also enter their own topic to create a button and get more gifs. Im using the giphy API.

I cant figure out how to make gifs appear on a button click. I've managed to get gifs on the page, but I have no idea where they are coming from because they have nothing to do with my topics. I'm not even sure my topics are being used. Ive been trying to figure this out for several hours and am truly stumped as to what I am missing to move one. Any suggestions are truly appreciated

HTML

      <!DOCTYPE html>
    <html>
        <head>
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
                crossorigin="anonymous">
            <link rel="stylesheet" type="text/css" href="assets/style.css">

            <title>Gif Tastic</title>
        </head>

        <body>
            <div id="buttons"></div> 
            <div id="search"></div>
            <div id="gifs"></div>

             <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <script src="assets/javascript.js"></script>
        </body>
    </html>

JAVASCRIPT

    $(document).ready(function() {
  var topics = [
    "cartoons",
    "mma",
    "dinosaur",
    "mexico",
    "monster",
    "muay thai",
    "mafia",
    "guitar"
  ];

  // Topic Buttons
  function createBtn() {}

  // Gifs
  function displayGifs() {
    var topic = $(this).attr("data-name");
    var queryUrl =
      "http://api.giphy.com/v1/gifs/search?q=" +
      btn +
      "&limit=10&api_key=pbQIp7jgT1wgUdEAxUYByhoM1KKnBzIU";
    var apiKey = "pbQIp7jgT1wgUdEAxUYByhoM1KKnBzIU";

    for (var i = 0; i < topics.length; i++) {
      var btn = $("<button>" + topics[i] + "</button>");
      btn.addClass("jsonData");
      btn.attr("data-name", topics[i]);
      btn.appendTo("#buttons");
      $("btn").on("click", function() {
        //displayGifs();
        //console.log("data-name");
      });
    }

    $.ajax({
      url: queryUrl,
      method: "GET"
    }).then(function(response) {
      if (response.data.length > 1) {
        for (var i = 1; i < 9; i++) {
          var result = response.data;
          var img = $("<img>");
          var imgUrl = result[i].images.original.url;
          img.attr("src", imgUrl);
          $("#gifs").append(img);
        }
      }
    });
  }

  displayGifs();
  createBtn();
});

You are creating your queryURL in the wrong place. btn isn't even defined, which is why the GIFs you display make no sense. You get the exact same GIFs if you search for "q=undefined". You need to create it dynamically on button click so you can use the button's value as your query. Also, PLEASE change your API key after this quetion is resolved or you will smash your daily limit until you are banned from giphy. — ecg8, Apr 01 '18 at 23:55
A tip: please try to write a question title that is more to the point. This helps others with similar questions in the future to find this question and use the answers given. — Peter B, Apr 01 '18 at 23:55

score 1 · Answer 1 · answered Apr 01 '18 at 23:49

Looks like you have a small typo in your API call, it should reference topic instead of btn like so:

var queryUrl =
      "http://api.giphy.com/v1/gifs/search?q=" +
      topic +
      "&limit=10&api_key=pbQIp7jgT1wgUdEAxUYByhoM1KKnBzIU";

I hope this helps.

Seethapriyanka Peddada · Accepted Answer · 2018-04-02T00:24:18.207

You are creating the buttons in $(document).ready(). so you cannot access $("#btn") in $(document).ready(). that's why your btn click event is not registered. So change your code as below. this will register button click event.

   for (var i = 0; i < topics.length; i++) {
     var btn = $("<button>" + topics[i] + "</button>");
     btn.addClass("jsonData");
     btn.attr("data-name", topics[i]);
     btn.attr("onclick", "displayGifs('"+topics[i]+"')");
     btn.appendTo("#buttons");
   }

I have changed your code little bit. changes are 1. Attaching button click event to button 2. Sending topic as input parameter to btn click function.

$(document).ready(function() {
    createBtn();
     })
   
     // Topic Buttons
     function createBtn() {
      var topics = [
       "cartoons",
       "mma",
       "dinosaur",
       "mexico",
       "monster",
       "muay thai",
       "mafia",
       "guitar"
     ];
     
       for (var i = 0; i < topics.length; i++) {
         var btn = $("<button>" + topics[i] + "</button>");
         btn.addClass("jsonData");
         btn.attr("data-name", topics[i]);
         btn.attr("onclick", "displayGifs('"+topics[i]+"')");
         btn.appendTo("#buttons");
       }
   }
     // Gifs
     function displayGifs(topic) {
    //    var topic = $(this).attr("data-name");
       var queryUrl =
         "http://api.giphy.com/v1/gifs/search?q=" +
       topic
         "&limit=10&api_key=pbQIp7jgT1wgUdEAxUYByhoM1KKnBzIU";
       var apiKey = "pbQIp7jgT1wgUdEAxUYByhoM1KKnBzIU";
   
     
       $.ajax({
         url: queryUrl,
         method: "GET"
       }).then(function(response) {
         if (response.data.length > 1) {
           for (var i = 1; i < 9; i++) {
             var result = response.data;
             var img = $("<img>");
             var imgUrl = result[i].images.original.url;
             img.attr("src", imgUrl);
             $("#gifs").append(img);
           }
         }
       });
     }

  <!DOCTYPE html>
    <html>
        <head>
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
                crossorigin="anonymous">
            <link rel="stylesheet" type="text/css" href="assets/style.css">

            <title>Gif Tastic</title>
        </head>

        <body>
            <div id="buttons"></div> 
            <div id="search"></div>
            <div id="gifs"></div>

             <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <script src="assets/javascript.js"></script>
        </body>
    </html>

Make gifs appear on a button click

2 Answers2