Javascript variables scope and use in JQuery

Question

I have very little knowledge of javascript and jquery, but I was able to put the following code together.

I want to add the result of 'name' to the div "displayName" on an html page when I click the "nameCreationButton" button on the html page. When I click "nameCreationButton", absolutely nothing happens.

I declared the variable 'name' outside of the function 'generator', so my jquery should be able to access it, right? I have spent hours looking at this, and I feel silly for not understanding why it will not work.

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);
  var name = firstName[randomNumber1] + " " + lastName[randomNumber2];
}

var name;

generator();

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

Here is my HTML page if it is any use.

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='style.css'/>
    <script type= 'text/javascript' src='nameGenerator_JS.js'></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
 <body>
    <button class = "nameCreationButton">Click Here to Generate Name</button>
    <div class = "displayName"></div>
 </body>
</html>

Also, there is nothing like JavaScript variable and jQuery variable... — Mr. Alien
– Mr. Alien, Commented Apr 18, 2014 at 17:47
Remove the spaces in your html as well. Should be class="nameCreationButton" — Matt R
– Matt R, Commented Apr 18, 2014 at 17:47
@Mr.Alien, it's allowed, but reduces readability and no one does it like that. Especially since he isn't consistent in one way or the other. — Matt R
– Matt R, Commented Apr 18, 2014 at 18:16

Tim Vermaelen · Accepted Answer · 2014-04-18 18:09:31Z

4

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

edited Apr 18, 2014 at 18:09

answered Apr 18, 2014 at 17:51

Tim Vermaelen

7,0792 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Garis M Suero Over a year ago

This is the best answer. :) Not limited to the question and it's improving the code.

Garis M Suero · Accepted Answer · 2014-04-18 18:07:03Z

3

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);
 });
});

edited Apr 18, 2014 at 18:07

answered Apr 18, 2014 at 17:47

Garis M Suero

8,1997 gold badges49 silver badges68 bronze badges

1 Comment

Scott Over a year ago

or return name from the generator would be cleaner

sudhan kantharuban · Accepted Answer · 2014-04-18 18:07:49Z

(*) 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() );
   });
 });

Collectives™ on Stack Overflow

Javascript variables scope and use in JQuery

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related