Can someone explain me why this doesn't work:

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

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

jsFiddle: /

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

Can someone explain me why this doesn't work:

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

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

jsFiddle: http://jsfiddle/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);
    });

• javascript
• jquery
• global-variables

• 5 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 Commented Dec 5, 2011 at 17:14
• Type something in the input and then press the button. – jQuerybeast Commented Dec 5, 2011 at 17:20
• 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 Commented Dec 5, 2011 at 17:31
• Doesn't it check what's its value at the exact time when you press the button? – jQuerybeast Commented Dec 5, 2011 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 Commented Dec 5, 2011 at 17:37

5 Answers 5

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/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/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/raFnT/7/

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

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

});

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

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>