'addEventListener' of undefined

Question

I am trying to make it so that when the user clicks one of the 30 teams, the team that is clicked is queried with the Giphy API.

The giphy API key used is the public API key.

// all 30 NBA Teams //
var predefinedButtons = [
  "Atlanta Hawks",
  "Boston Celtics",
  "Brooklyn Nets",
  "Charlotte Hornets",
  "Chicago Bulls",
  "Cleveland Cavaliers",
  "Dallas Mavericks",
  "Denver Nuggets",
  "Detroit Pistons",
  "Golden State Warriors",
  "Houston Rockets",
  "Indiana Pacers",
  "LA Clippers",
  "LA Lakers ",
  "Memphis Grizzlies",
  "Miami Heat",
  "Milwaukee Bucks",
  "Minnesota Timberwolves",
  "New Orleans Hornets",
  "New York Knicks",
  "Oklahoma City Thunder",
  "Orlando Magic",
  "Philadelphia Sixers",
  "Phoenix Suns",
  "Portland Trail Blazers",
  "Sacramento Kings",
  "San Antonio Spurs",
  "Toronto Raptors",
  "Utah Jazz",
  "Washington Wizards"
];
console.log(predefinedButtons);


// The Buttons added dynamically //
var $nbaTeams;

var nbaButtons = function nbaGiphy() {
  for ( i in predefinedButtons ) {
    $nbaTeams = $("<button class='.btn btn-secondary' 'onclick='getNBAGiphy()''>").text(predefinedButtons[i]);
    $("#nbaTags").append($nbaTeams);
  }

}
nbaButtons();


//  The code below is where the event listener is 'undefined'  //
function getNBAGiphy() {
  var nbaSearchGifs;
  nbaSearchGifs.addEventListener('click', function() {
    nbaSearchGifs = $(".btn btn-secondary").val();
    xhr = $.get("http://api.giphy.com/v1/gifs/search?q="+nbaSearchGifs+"&api_key=dc6zaTOxFJmzC&limit=15");
    xhr.done(function (response) {
      console.log("success got data", response);
      nbaTeamData = response.data
      $("#giphyContent").html("");
      console.log(nbaSearchGifs);
    })
  });
}
getNBAGiphy();

that's just a variable I declared before the function to see if where I was declaring the variable was possibly the issue. Also, how do you recommend I fix the line you were referring to? — pnoonan32, Jul 19 '18 at 05:51

score 1 · Answer 1 · answered Jul 19 '18 at 05:19

1

You are declaring variable and you have not assigned any value to it. So by default it is undefined. Code i am referring to is:

 function getNBAGiphy() {
    var nbaSearchGifs;
      nbaSearchGifs.addeventListner

answered Jul 19 '18 at 05:19

Stakshi

389
1
15

How do you recommend I fix this? – pnoonan32 Jul 19 '18 at 05:51
populate it with whatever you want to add listener to... I assume you are trying to add listeners to buttons and on clicking them you are already calling this function. I dont know if you need to do addEventListener again. Button click should call this function. Else just read some documentation on setting up onClickListeners on Buttons.... – Stakshi Jul 19 '18 at 07:46

'addEventListener' of undefined

1 Answers1