0

I basically want to know how global variables work in a javascript/JQuery environment. I am most familiar with a language called processing which I've been told is java-based. I expected variables in javascript and JQuery to behave like the ones in processing, but they do NOT work as I expect and I cannot for the life of me wrap my head around it.

I have a very simple example made up to illustrate my confusion:

 var what="";

 $(document).ready(function(){
      $("p").click(function () {
           what="p";
           });
      if(what=="p"){
            alert(what);
           }//end if
 });//end doc ready

In processing, this would work because the 'what' variable is global and as it is changed by clicking on a paragraph, the if statement should be continuously checking to see if 'what'=='p', and trigger the alert. But that is not what happens-- 'what' only seems to be updated WITHIN the click function, even though it is a global variable, so when it comes to the if statement, 'what' still equals "" instead of "p".

If someone could explain why this happens, I will be very grateful!

Ryan Kohn
  • 13,079
  • 14
  • 56
  • 81
AlexJ
  • 1
  • 1
  • Even thought the function is defined before the if statement it is not executed before it – Musa Aug 27 '12 at 04:00
  • See http://stackoverflow.com/questions/500431/javascript-variable-scope – Barmar Aug 27 '12 at 04:10
  • _"I expected variables in javascript and JQuery to..."_ - Note that jQuery isn't another language, it is a library (a collection of functions) written in JavaScript. So it can't do anything that JavaScript can't do, and its syntax is just JavaScript syntax - so the way variables behave in jQuery methods is the same as for any other JavaScript. – nnnnnn Aug 27 '12 at 05:44

2 Answers2

4

The if statement only runs once when the DOM is first ready. It is not running continuously. If you want it to run during the click handler, then you would use this code:

 var what="";

 $(document).ready(function(){
    $("p").click(function () {
       what="p";
       if(what=="p"){
           alert(what);
       }//end if
    });
});//end doc ready
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Oh okay it only runs once. I thought that if any function was called on the page, the whole thing would execute again. Thank you for explaining this and taking the time to answer a newbie's question! – AlexJ Aug 27 '12 at 05:14
0

the if statement should be continuously checking to see if 'what'=='p', and trigger the alert.

Why? None of your code produces that functionality. If you want that to happen, you can use setInterval():

setInterval(function() {
    if(what=="p") { 
        alert("what");
    }
}, 500); // executes function every 500 milliseconds

But that is not what happens-- 'what' only seems to be updated WITHIN the click function, even though it is a global variable

No, your what variable is being updated globally. You just don't notice because you made false assumptions about the if functionality (it's only being called once).

jeff
  • 8,300
  • 2
  • 31
  • 43
  • Thank you so much for your responses. Sorry about my ignorance-- the only programming know-how I have to go off of is processing, and my professors have told me everything works like it and the only basic difference is syntax. Obviously I have a lot to learn! – AlexJ Aug 27 '12 at 05:10
  • @AlexJ - I know nothing about the Processing language, but I am familiar with quite a few other languages (including Java, which I mention since you mentioned it) and all of the ones I know work like JavaScript as far as this type of functionality. That is, a block of code that happens to use a global variable in an `if` test would not be automatically executed again when some other code changes the variable - an `if` test doesn't continuously "monitor" a variable. – nnnnnn Aug 27 '12 at 05:36