Wikipedia Viewer

This is one of the projects on freecodecamp. I would like a review on my code. Thanks in advance.

Javascript:

```
var answers;

function formatSearchString() {

var searchString = document.getElementById("searchBar").value;
var words = searchString.split(" ");
searchString = words.join("_");
return searchString;

}

function getQueryData() {

var stringToSearch = formatSearchString();
var wikiUrl = "http://en.wikipedia.org/w/api.php?action=opensearch&search=" + stringToSearch + "&format=json&callback=wikiCallbackFunction";

$.ajax(wikiUrl, {

dataType: "jsonp",
success: function(wikiResponse) {
//alert(wikiResponse);
//alert(wikiResponse.length); Always 4.
//alert(wikiResponse[0]); Search String
//alert(wikiResponse[1]); Titles
//alert(wikiResponse[2]); Explanations
//alert(wikiResponse[3]); Links
answers = wikiResponse;

}

});

setTimeout(formatResults, 1500);

}

function getRandomArticle() {

var wikiUrl = "http://en.wikipedia.org/wiki/Special:Random";
window.location = wikiUrl;

}

function formatResults() {

$("#results").empty();

var i = 0;
for (; i < answers[1].length; i++) {

var newDiv = document.createElement("div");
newDiv.className = "searchResults";

var titleLink = document.createElement("a");
titleLink.setAttribute("target", "_blank");
titleLink.setAttribute("href", answers[3][i]);
titleLink.innerHTML = answers[1][i];

var desc = document.createTextNode(answers[2][i]);
var newLine = document.createElement("br");

newDiv.appendChild(titleLink);
var newLine = document.createElement("br");
newDiv.appendChild(newLine);
var newLine = document.createElement("br");
newDiv.appendChild(newLine);
newDiv.appendChild(desc);
var newLine = document.createElement("br");
newDiv.appendChild(newLine);

var newLine = document.createElement("br");
newDiv.appendChild(newLine);

document.getElementById("results").

Here, it looks like you are trying to go around the async behaviour of AJAX:

$.ajax(wikiUrl, {

    dataType: "jsonp",
    success: function(wikiResponse) {
      //alert(wikiResponse);
      //alert(wikiResponse.length); Always 4.
      //alert(wikiResponse[0]); Search String
      //alert(wikiResponse[1]); Titles
      //alert(wikiResponse[2]); Explanations
      //alert(wikiResponse[3]); Links
      answers = wikiResponse;

    }

});

setTimeout(formatResults, 1500);

Whilst it does work, it could be better, because you're specifically saying 1500 milliseconds -- what if the request takes slightly longer?

Instead, use callbacks, like this:

$.ajax(wikiUrl, {
    dataType: "jsonp",
    success: formatResults             
});

This will call the formatResults function when the AJAX request is successful, passing the wikiResponse as a parameter. You'd also need to add answers as a parameter to the function itself:

function formatResults(answers) {
    ...
}

and then you can get rid of your var answers at the top! :)

StackExchange Code Review Q#131342, answer score: 4