Why don't 'alert' show new value of a variable set from a input's value?

Question

After a submit button is clicked, outside 'click' event I use 'alert' to display the variable which is assigned a value from an input text. Why was a blank value returned? Then, I tried to create a function containing an 'alert' for that variable, and I used this function in 'click' event that resulted in value of textbox is shown. Why does this happen? How are two operation different? HTML:

<form id="myForm">Your name:
    <input type="text" id="nametxt" />
    <input type="button" value="submit" id="submit" />
</form>

jQuery: (First experiment)

var name = "";
$("#submit").click(function(){    
    name = $("#nametxt").val();
});
    alert(name); ==============> Unexpected result: blank value

jQuery: (Second experiment)

var name = "";

var makeSentence =  function() {
    return name + " is nice!";
}

var myFunc = function() {

    alert(makeSentence());
}

$( "#submit" ).click(function() {
   name = $('#nametxt').val();
   myFunc(); ==========================> Expected result: "yourname is nice!" is alerted.
});

Why do experiment 2 display name's value but experiment 1 don't?

Demo: http://jsfiddle.net/jasperlee/2AVQf/

because within the submit is another scope, is more like private scope, thats why you will never get the value outside the scope, you can refer to this link for some idea, http://stackoverflow.com/questions/14754619/jquery-ajax-success-callback-function-definition, a callback is needed if you want the value to be out of the scope — Se0ng11, Jul 21 '14 at 01:50

Ryan Mitchell · Answer 1 · 2014-07-21T02:04:27.997

2

In your first experiment, your alert() is outside the function definition, which means it is called immediately after your function is defined, not when you click on your button. Here's a working jsFiddle based on your experiment 1.

As an aside, you might consider using console.log() for testing rather than alert(). Personally I think it's a lot more convenient.

edited Jul 21 '14 at 02:04

answered Jul 21 '14 at 01:54

Ryan Mitchell

754
5
8

Sarbbottam · Accepted Answer · 2014-07-21T02:16:55.300

var name = "";
$("#submit").click(function(){    
    name = $("#nametxt").val();
});
alert(name);

In this example name is set to blank. string. Blank value will be alerted as the alert function is getting executed when the page loads.

This is the expected behavior not unexpected.

Please note that alert gets executed only once, in this example, when the page loaded.

However, the anonymous function associated with the submit event updates the name variable.

You can verify it by accessing the name variable in Javascript Console

var name = "";

var makeSentence =  function() {
    return name + " is nice!";
}

var myFunc = function() { 
    alert(makeSentence());
}

$( "#submit" ).click(function() {
   name = $('#nametxt').val();
   myFunc();
});

In this example the alert function is getting executed when myFun is invoked. myFunc in turn is invoked when the #submit is clicked.

The name variable is getting set when the anonymous function associated with the click event of the #submit is executed.

alert is getting as many times the #submit is clicked in this example.

Why don't 'alert' show new value of a variable set from a input's value?

2 Answers2