Q:

Setting text input as a variable in Javascript

I'm trying to use my text input as a string variable and use that variable as a part of a URL to pull up JSON data but I can't seem to get it to work properly. 
I don't know if I'm setting the variables incorrectly but any help would be appreciated. Thank you!
$(document).ready(function() {
    var p = document.querySelector('p');
    var input = document.getElementById('search').value;
    $("#go").click(function() { 
        if (input === '') {
            p.style.backgroundColor = 'transparent';
            p.classList.add = 'hide';
            p.innerHTML = '';
        } else {
            $.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=5&search=" + input + "&callback=?", function(data) {
                p.innerHTML = "<br> Click the links below";
                p.classList.remove('hide');
                var i = 0
                for (i; i < 5; i++){
                    if (data[3][i] !== undefined){
                        p.innerHTML += '<h2> <a href ="' + data[3][i] + '" target = "_blank">' + data[1][i] + '<br>' + '<h3>' + data[2][i] + '</h3>' + '</h2>' 
                    } else {
                        p.innerHTML = ' <h2> No matching result </h2>';
                    }
                }
            });
        }
    });
});

A:

At the time you assign the variable value, it is empty because it is run when the site is loaded and there is probably no text in the search box yet. You want the content at the time #go is clicked, so just assign it inside the click event handler:
$(document).ready(function() {
var p = document.querySelector('p');
// the text field value is empty at this point

$("#go").click(function() { 
  // this is run when user clicks #go
  var input = document.getElementById('search').value;
  if (input === '') {
    p.style.backgroundColor = 'transparent';
    p.classList.add = 'hide';
    p.innerHTML = '';
  }
  else {
  // encode user input
  $.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=5&search=" + encodeURIComponent(input) + "&callback=?", function(data) {
    p.innerHTML = "<br> Click the links below";
    p.classList.remove('hide');
    var i = 0
    for (i; i < 5; i++){
      if (data[3][i] !== undefined){
      p.innerHTML += '<h2> <a href ="' + data[3][i] + '" target = "_blank">' + data[1][i] + '<br>' + '<h3>' + data[2][i] + '</h3>' + '</h2>' 
    }

    else {
      p.innerHTML = ' <h2> No matching result </h2>';

    }
    }
  });
  }
});
});

Additionally, you should always encode user input if you include it in a URI. Otherwise you'll experience unexpected behaviour when using any non alphanumerical character (including whitespace) in the search box. For a more detailed explanation of how and why, see the documentation.

