CODEWITHSUNDEEP
javascriptjqueryglobal-variables
jQuerybeast
jQuerybeast

Reputation: 14490

jQuery Global Variable

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

Upvotes: 0

Views: 25212

Answers (5)

Clinton Green
Clinton Green

Reputation: 9977

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

Upvotes: 0

Chris
Chris

Reputation: 4471

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>

Upvotes: -1

Darek Rossman
Darek Rossman

Reputation: 1323

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

});

Upvotes: 0

BNL
BNL

Reputation: 7133

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/

Upvotes: 7

Abe Miessler
Abe Miessler

Reputation: 85056

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

Upvotes: 1

Related Questions