Can't return Wiki API data

I wrote the following code, but it won't return the JSON data. The link to the code in Codepen is: https://codepen.io/mlestina/pen/OZpOQW?editors=1011

The error message using Control-Shift-J is: getRecipes: falling back to a synchronous message for: "https://s.codepen.io" LoginRecipes.jsm:244 inside function, searchTerm is: Stalin and x is: Stalin and wikiLink is: "https://en.wikipedia.org/w/api.php?action=opensearch&search=Stalin&format=json&origin=*" console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 error occurred console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 and x is: undefined console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1 POST XHR http://localhost:27275/command [HTTP/1.0 500 FAILED 15ms] POST XHR http://localhost:27275/command [HTTP/1.0 500 FAILED 0ms]

  The HTML is:

<form> <input type="text" name="a" id="a"><br>

<button onclick="passToJ()">Search</button> </form>

and the Javascript is: var x;

function passToJ() { var searchTerm = document.getElementById("a").value; x = searchTerm; var wikiLink = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&format=json&origin=*"; console.log("inside function, searchTerm is: ", searchTerm, " and x is: ", x, " and wikiLink is: ", wikiLink);

$.ajax({ url: wikiLink,

  dataType: "json",
  type: "GET",
  success: function(data) {
    console.log(data); 
  },
  error: function() {

console.log('error occurred'); },

}); };

console.log(" and x is: ", x);