Chrome says I am using illegal function invocation

Question

I'm trying to write some Javascript code that involves a function that calls another function. For some reason, I get an error message in the Chrome dev tools saying, "Uncaught TypeError: Illegal invocation" on line 6. However, the function getRequest seems to execute nonetheless and logs "h" to the console. What's going on here?

$(document).ready(function(){});
$(function(){
  $('#search').click(function(event){
    event.preventDefault();
    var searchTerm = $('#query').val();
    getRequest();
  });
});

function getRequest(searchTerm){
  console.log("h");
  var params = {
    part: 'snippet',
    key: 'AIzaSyC7oHGfvlIMoEnboos6LZ2b2h_KpPu0u1Q',
    q: $('#searchbox') //searchTerm
  };
  url = 'https://www.googleapis.com/youtube/v3/search';

  $.getJSON(url, params, function(data){
    showResults(data.Search);
    //console.log("x");
  });
}

Answer 1

You are passing a JQuery object as a parameter, and JQuery isn't able to serialize it:

    key: 'AIzaSyC7oHGfvlIMoEnboos6LZ2b2h_KpPu0u1Q',
    q: $('#searchbox') //searchTerm
};

If it is an input, you can pass its value using .val()

    key: 'AIzaSyC7oHGfvlIMoEnboos6LZ2b2h_KpPu0u1Q',
    q: $('#searchbox').val() //searchTerm
};

Or

just use the parameter you are receiving in the method (that's why you created it, isn't it?)

getRequest(searchTerm);

then

    key: 'AIzaSyC7oHGfvlIMoEnboos6LZ2b2h_KpPu0u1Q',
    q: searchTerm
};