Make gifs appear on a button click

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

Solution

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>