Declaring a global variable in Jquery/Javascript

The issue is when you assign values to the global variables. Variables are not dynamic, their value is static. As soon as you assign something to them that is the value they keep until you manually change them.

When the page loads your variables are declared and you initialize them with the current value of #set-username and #set-password:

var $username = $("#set-username").val();
var $password = $("#set-password").val();

Since the page has just loaded that value is just an empty string. When you reference these variables later in your code those elements might have a different value, but the variables have not had their value changed. So they still just contain an empty string.

If you split the declaration and initialization of your variables so that their value is assigned at the moment that you expect a username/password to have been entered like this:

var $username; 
var $password; 

$(".content-area").on("click","#saveDetails",function(event){
  if( $("#set-username").val().length > 0 ) {
      $username = $("#set-username").val();
      console.log($username);  
  }

});


$(".content-area").on("click","#saveDetails",function(event){
  if( $("#set-password").val().length > 0 ) {
      $password = $("#set-password").val();
      console.log($password);  
  }
});

Then your code will work. Though I have to say that attaching two separate click event listeners to #saveDetails seems a bit wasteful, merging them into one listener like this:

var $username; 
var $password; 

$(".content-area").on("click","#saveDetails",function(event){
  if( $("#set-username").val().length > 0 ) {
      $username = $("#set-username").val();
      console.log($username);  
  }
  if( $("#set-password").val().length > 0 ) {
      $password = $("#set-password").val();
      console.log($password);  
  }
});

Is more efficient and will work just as well.