Javascript variables scope and use in JQuery

Question 1

There is absolutely no point in declaring the variable name twice. You do it once inside generator() and once as a global which is not a very good idea.

Instead, what you want is to execute the function generator() once you click on the button. This function needs to return the name.

To rewrite this:

function generator(){
    var firstName = ["John","Mike","Robert","Patrick"],
        lastName = ["Smith","Johnson","Williams","Anderson"],
        randomNumber1 = parseInt(Math.random() * firstName.length, 10),
        randomNumber2 = parseInt(Math.random() * lastName.length, 10);

    return firstName[randomNumber1] + " " + lastName[randomNumber2];
}

$(function(){
    $(".nameCreationButton").click(function(){
        //var name = generator();
        $(".displayName").append(generator());
    });
});

demo

Question 2

You need to remove the single ' quote on append('name').

And also you need to remove the var declaration for the name variable inside the generator function. The var name inside the generator block ({ ...}) makes the variable only visible inside that block. So on your original code, you are having two different variables named name with two different scopes.

Try:

function nameGenerator(){

  var firstName = ["John","Mike","Robert","Patrick"];
  var lastName = ["Smith","Johnson","Williams","Anderson"];

  var randomNumber1 = parseInt(Math.random() * firstName.length);
  var randomNumber2 = parseInt(Math.random() * lastName.length);
  return firstName[randomNumber1] + " " + lastName[randomNumber2];
}


$(document).ready(function(){
 $(".nameCreationButton").click(function(){
    var name = nameGenerator();
    $(".displayName").text(name);
 });
});

Question 3

(*) you had rfered variable with quotes, it will be considered a string

 var name = "aslan";
 console.log(name) //=> aslan
 console.log("name") //=> name

(*) also, variable name is declared inside and out side function. variable declared inside function is considered as local variable, so var name declared outside function wont get update, which us used append(). check : http://snook.ca/archives/javascript/global_variable

Change code to:

 function generator(){

   var firstName = ["John","Mike","Robert","Patrick"];
   var lastName = ["Smith","Johnson","Williams","Anderson"];

   var randomNumber1 = parseInt(Math.random() * firstName.length);
   var randomNumber2 = parseInt(Math.random() * lastName.length);
   return  firstName[randomNumber1] + " " + lastName[randomNumber2];
 }


 $(document).ready(function(){
   $(".nameCreationButton").click(function(){
      $(".displayName").append( generator() );
   });
 });