jQuery function does not change global variable while regular javascript functions do

Question

Is there a reason that this code:

var verb = "";

    function printPage (input) {
            $("div").append(input + "<br>");
    }

    $( "#submit" ).click(function() {
       verb = $('#enter').val();
       printPage(verb);
    });

    printPage(verb);

only results in #enter (a form)'s value being logged once in the click event (while the last printPage prints the original empty string), while this code:

var verb = "";

function printPage (input) {
        $("div").append(input + "<br>");
}

function buttonClick() {
  verb = "verb!";
  printPage(verb);
}

buttonClick();
printPage(verb);

prints verb twice, as the function has successfully changed the verb variable value? Sorry if I haven't explained my problem well enough, I'll elaborate more if needed.

try without var ... like verb = ""; if you have to make anything global then dont use var with it. — Rahul
– Rahul, Commented Jul 21, 2014 at 5:32
The function passed to $( "#submit" ).click(...) will be triggered only when you click the button. Whereas in the second case, since you are explicitly calling buttonClick(), it'll log twice. — techfoobar
– techfoobar, Commented Jul 21, 2014 at 5:33
@Rahul - Not true. You can use var x in global scope to make something global (though var is not strictly needed). More importantly in this case, it need not be global, it can be limited to the parent scope, which I believe should be the function bound to $(document).ready() — techfoobar
– techfoobar, Commented Jul 21, 2014 at 5:35
@techfoobar Yes, it is in the function bound to $(document).ready(). Is there any way to pass the verb value from #enter to the global variable verb when it is clicked? — cardboardtheory
– cardboardtheory, Commented Jul 21, 2014 at 16:06

Bhojendra Rauniyar · Accepted Answer · 2014-07-21 05:34:43Z

1

input value may be empty so you might be seeing unchanged, you may use like this:

verb = $('#enter').val() || 'verb';

answered Jul 21, 2014 at 5:34

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

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

Comments

user3692927 · Accepted Answer · 2014-07-21 05:59:59Z

0

Your buttonClick function runs before the printPage function -- and that makes the verb variable hold 'verb!'. The printPage function is run twice AFTER the verb var has the 'verb!' value in it.

In the case of the jQuery, printPage function is run right away while verb is empty. ONLY when you CLICK the button, then verb has a value.

answered Jul 21, 2014 at 5:59

user3692927

645 bronze badges

2 Comments

cardboardtheory Over a year ago

I see what you mean. So if I were somehow able to run console.log(verb); after the button was clicked, it would correctly log the form value to console?

user3692927 Over a year ago

Yes -- that's right. verb is empty until the button is clicked.

Jonathon Hibbard · Accepted Answer · 2014-07-21 05:36:35Z

0

jQuery or not, it would change the variable if your method was run and if the value of $('#enter') isn't blank ( otherwise, you wouldn't see a change ).

To test this out, put console.log( verb ); before and after the verb = $('#enter').val();. You will either see that your onClick method isn't being called, or even that it doesn't have a value.

var verb = "";

function printPage (input) {
        $("div").append(input + "<br>");
}

$( "#submit" ).click(function() {
   console.log( verb );
   verb = $('#enter').val();
   console.log( verb );
   printPage(verb);
   console.log( verb );
});

printPage(verb);

My guess is that you're not using the correct selector ( instead of #enter, you should be using a different id/class selector ) or that the value is actually empty.

Edit: In case you are wondering what console.log is doing, its writing it to your browser's console ( apologies if you already know this ). Should be abel to open this up and see the debug logs that we're printing.

You could also just alert( verb ) if you wanted to do that instead.

answered Jul 21, 2014 at 5:36

Jonathon Hibbard

1,56213 silver badges20 bronze badges

1 Comment

cardboardtheory Over a year ago

I was approaching the problem the wrong way! The problem was that the verb value was empty due to the button not being pressed. Thanks for your input though!

Collectives™ on Stack Overflow

jQuery function does not change global variable while regular javascript functions do

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related