I've created a function that uses getJSON to retrieve a data set found on an API website of registered Github Users
<!DOCTYPE html>
<!---->
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
var user = $('#search').val();
$.getJSON("https://api.github.com/users/" + user)
.done(function(data) {
var br = "<br>";
var p = $("<p id='users'></p>");
var name = "Username: "+ user.login + br;
var pic = "Avatar Picture:" + br + "<img src='"+user.avatar_url+"'/>" +br;
var homeURl = "Homepage URL: "+"<a href='"+user.html_url+"'>"+user.html_url+"</a>" +br;
var location = "Location: "+"Null" +br;
var admin = "Admin: "+user.site_admin;
p.append("<p>"+ name + pic + homeURl + location + admin +"</p>");
$("#results").empty().append(p);
})
.fail(function(jqXHR) {
console.log("Error: " + jqXHR.status);
})
.always(function() {
console.log("Random Users Request finished");
});
});
</script>
</head>
<body>
<input id="search" type = "text">
<button>Search</button>
<div id="results"></div>
</body>
</html>
As you can tell I have began to modify it so that instead of displaying all users it only displayers the user that has been searched
var user = $('#search').val();
$.getJSON("https://api.github.com/users/" + user)
This snippet of code grabes the username entered in the text area and passes it to the getJSON method in the Url. An example URL is "https://api.github.com/users/mojombo", thus if the user enters "mojombo" then their profile would appear
This function is accessed via a button
<input id="search" type = "text">
<button>Search</button>
However when you search for the example user, in fact any user no data is displayed and a blank screen remains
You have not connected your function to the button.
As it stands, it runs before the user has typed anything into the search field (thus requesting "https://api.github.com/users/" because user at that time is an empty string) , and won't react at all to a button click.
Instead of just
$(function(){
/* code */
});
do
$(function(){
$('button').on('click', function(){
/* code that runs when button is clicked */
})
});