jQuery Global Variable

Question

Can someone explain me why this doesn't work:

$(function() { 
   var damg = $(".hidden").val();

    $("button").click(function() {
        alert(damg);
    });
});

jsFiddle: http://jsfiddle.net/raFnT/

Is it good to use global variables? I've also read that it is a slower option than typing it every time?

To explain in detail:

I have this:

$("button").click(function() {
            alert(damg);
        });

and the damg is a value of the input: var damg = $(".hidden").val();

When you type something in the input and THEN press the button, alert the value of that input.

I could use

$("button").click(function() {
var damg = $(".hidden").val();
                alert(damg);
            });

but in one point that I will have 100 functions I will end up like this:

$("button1").click(function() {
    var damg = $(".hidden").val();
                    alert(damg);
                });

$("button2").click(function() {
    var damg = $(".hidden").val();
                    alert(damg);
                });

$("button3").click(function() {
    var damg = $(".hidden").val();
                    alert(damg);
                });

$("button4").click(function() {
    var damg = $(".hidden").val();
                    alert(damg);
                });

$("button5").click(function() {
    var damg = $(".hidden").val();
                    alert(damg);
                });

I want to set a global variable so that on every function I don't need to call the function again.

Something like this:

var damg = $(".hidden").val();

$("button1").click(function() {
        alert(damg);
    });

$("button2").click(function() {
        alert(damg);
    });

$("button3").click(function() {
        alert(damg);
    });

$("button").click(function() {
        alert(damg);
    });

$("button4").click(function() {
        alert(damg);
    });

$("button5").click(function() {
        alert(damg);
    });

This works perfectly. The problem is that at the time you call `var damg = $(".hidden").val();`, the field has no value yet. And `damg` is not *global*. It is local to the immediate function. — Felix Kling, Dec 05 '11 at 17:14
And? It will alert an empty value. Because the value of the input field is assigned to `damg` when the page loads, not when you click the button. If you want the `damg` updated whenever the value of the field changes, then you have to set up a `change` event handler for the text field. A string does not updated itself automatically. — Felix Kling, Dec 05 '11 at 17:31
Doesn't it check what's its value at the exact time when you press the button? — jQuerybeast, Dec 05 '11 at 17:36
No.`.val()` returns a string, you assign the string to `damg`. When you click the button you are just echoing the string, which was assigned when you called `var damg = $(".hidden").val();`. — Felix Kling, Dec 05 '11 at 17:37
Now I understood. So how does everyone use this? Do they call on every single function var damg = $(".hidden").val(); ? — jQuerybeast, Dec 05 '11 at 17:38
Probably. It depends on your application design. E.g. listening to the `change` event and update a value whenever the value changes is another solution. It depends mostly on whether you need the value whenever it changes or only when a button is clicked. Your choice.... — Felix Kling, Dec 05 '11 at 17:40
Thanks. Much appreciate. It's pretty much what I was looking for — jQuerybeast, Dec 05 '11 at 17:52
Wow, I had a similar issue thanks for sticking it out until you got the solution. I wrapped my var in a change function and it works great now. No more declaring variables over and over again. — Clinton Green, May 27 '16 at 04:33

BNL · Accepted Answer · 2011-12-05T17:29:10.360

7

You have it backwards, a global variable has to be written OUTSIDE of a function.

Your code doesn't work because .hidden doesn't have a value.

http://jsfiddle.net/raFnT/2/

It is bad practice to use global variables unless you really need them to be global. I don't know what you mean by 'typing it every time.'

Also, you are not reloading the value in the click handler.

$(function() {            
    $("button").click(function() {
        var damg = $(".hidden").val();
        alert(damg);
    });            
});

http://jsfiddle.net/raFnT/6/

In the interest of having a good answer, what the OP wants is the blur function.

$(function() {     
    var damg;

    $(".hidden").blur(function () {
        damg = $(".hidden").val();
    });

    $("button").click(function() {
        alert(damg);
    });            
});

http://jsfiddle.net/raFnT/7/

edited Dec 05 '11 at 17:29

answered Dec 05 '11 at 17:12

BNL

7,085
4
27
32

you're wrong. Type something in the input and press click me. – jQuerybeast Dec 05 '11 at 17:17
If I had 100 functions, I'll had to set var damg = $(".hidden").val(); 100 times and that is so bad solution. So thats the reason why I'm trying to set the variable as global and then you come by adding value='to something' inside the input and you're saying that I had nothing in the input. Have you even tried to type something in the input and then click the button? – jQuerybeast Dec 05 '11 at 17:23
9

Guess I won't help anymore then, if anything is horrible it is your question. – BNL Dec 05 '11 at 17:24
Yes, check my question now. You might aswell understand. Thanks – jQuerybeast Dec 05 '11 at 17:27
Thats more like it. Thanks. Does the blur counts for .text() .length and any other event? Or only for .val() ? – jQuerybeast Dec 05 '11 at 17:32
It is triggered anytime the cursor leave the input box, which includes clicking on the button while the cursor is in the box. – BNL Dec 05 '11 at 17:34
It's better to call the function evertime? – jQuerybeast Dec 05 '11 at 17:37

score 1 · Answer 2 · answered Dec 05 '11 at 17:14

1

Your example is working. The issue is that you are setting damg on document ready. On document ready your text box has no value in it. If you assign a default value it will alert that value on button click. You can see this in action in this fiddle: http://jsfiddle.net/raFnT/1/

If you would like to change the value of damg on every button click change your code to this:

var damg;

$("button").click(function() {
    damg = $(".hidden").val();
    alert(damg);
});

answered Dec 05 '11 at 17:14

Abe Miessler

82,532
99
305
486

Wrong again. Change the value of the input and click the button. – jQuerybeast Dec 05 '11 at 17:19
What exactly is wrong? My example displays the default value on button click. If you want the value to change everytime then look at the suggested code change I provided. You can see it in action here: http://jsfiddle.net/raFnT/8/ – Abe Miessler Dec 05 '11 at 17:30

score 0 · Answer 3 · answered May 27 '16 at 04:36

0

Just adding my two cents, here's the same solution but using a change function to monitor for changes.

JS

var damg;

$('#contact-name').on('change', function(){
    damg = $(".hidden").val();
});

answered May 27 '16 at 04:36

Clinton Green

9,697
21
68
103

Darek Rossman · Answer 4 · 2011-12-05T17:31:28.723

0

The damg variable is being set immediately when the function first executes - you need to set that var in the click function itself so that it grabs the value from the field at that time.

Not sure why this was down voted - this is what you have asked for:

$(function() { 

   var damg = $(".hidden").val();

    $("button").click(function() {
        damg = $(".hidden").val();
        alert(damg);
    });

});

Or even more simply:

$(function() { 

    $("button").click(function() {
        alert( $(".hidden").val(); );
    });

});

edited Dec 05 '11 at 17:31

answered Dec 05 '11 at 17:15

Darek Rossman

1,323
1
10
12

If I need to use that variable in 100 different functions I'll have to set 100x var damg = $(".hidden").val(); ? – jQuerybeast Dec 05 '11 at 17:20
you could add a blur event to .hidden, that way whenever it gets changed your variable would update. – BNL Dec 05 '11 at 17:22

Chris · Answer 5 · 2011-12-05T17:33:33.973

That's not a global variable. That's a var scoped to the anonymous function you pass to jQuery's ready handler.

The reason that doesn't work (and by not work, I assume you mean it alerts an empty string) is because damg is assigned when the DOM loads. At that time, your text box doesn't have a value. So it actually is working. If you want the text box's value whenever you click the button, you need to get it's value inside the click handler.

You can cache the DOM lookup by doing something like this though:

$(function() {
    var damg = $(".hidden");

    $("#one").click(function() {
        alert("button one: " + damg.val());
    });

    $("#two").click(function() {
        alert("button two: " + damg.val());
    });
});

<input type="text" class="hidden" placeholder="Type text here">
<button id="one">Click me(1)!</button>
<button id="two">Click me(2)!</button>

jQuery Global Variable

5 Answers5

Linked