jQuery/Javascript global and local variable confusion - Basic

Question

$(document).ready(function() {

var v = $("input[name=link]").val();

$('p').on('click', function () {
    console.log(v);
    console.log('hello'); 

})  
});

Above is a jQuery/JS code that I have written. It is supposed to get the value in an input field, and print it to the console when i click on a paragraph.

I already declare v as a global variable, but it's not printing to the console. It only works if I place the var v declaration into the function making it local variable. Why it is like this? I thought global variables are always supposed to work all around the whole code. Pls educate me on this.

Denys Séguret · Accepted Answer · 2013-03-30 17:39:34Z

4

This isn't a problem of scope, v is perfectly visible from the callback you give to jQuery as event handler.

The problem with your code is that v is evaluated immediately, as soon as the document is ready. If you change the value of the input, v isn't changed, it keeps being empty if it was initially empty. v isn't some kind of pointer to the input's field, there is no reason for it to change when the input is changed.

To ensure the value of the field at click time is used, use this code :

$(document).ready(function() {
    $('p').on('click', function () {
        var v = $("input[name=link]").val();
        console.log(v);
        console.log('hello'); 
    })  
});

answered Mar 30, 2013 at 17:39

Denys Séguret

384k90 gold badges813 silver badges779 bronze badges

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

2 Comments

Armesh Singh Over a year ago

Oh ya... FACEPALM myself. Keep forgetting, I think I'll keep it local the, or add a keyup() function. Anything better to detect change of the input field rather than keyup()?

Denys Séguret Over a year ago

@ArmeshSingh Better use the change event : $("input[name=link]").on('change', function(){ console.log($(this).val()) });.

Suresh Atta · Accepted Answer · 2013-03-30 17:46:13Z

0

The problem is you have'nt change the v value after you change the text in the textbox

When ready called you assigned the value of the textbox.i.e empty.

see the below code howit works.

   var v = 10;
   alert("" + v);
   myFunction();

    function myFunction()
       {
       v = 20;
       }

    alert("" + v);

edited Mar 30, 2013 at 17:46

answered Mar 30, 2013 at 17:40

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

Collectives™ on Stack Overflow

jQuery/Javascript global and local variable confusion - Basic

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related