Global Vars in JS/Jquery between functions

Question

When attempting to grab values from vars globally defined within another function, i keep getting undefined, yet it was my understanding global vars work between functions.

I would like to be able to get the var values within the main click function, and use them within function nu() without having to reuse the

var itemTitle = $("input#add_item_item_title").val();

in order to define another time.

I was sure this is possible, but perhaps im missing something.

The JS/JQ

$(document).ready(function(){
  init();
});


function init() {
    $(function() {
      $('.error').hide();
      $(".add_item_btn").click(function() {
            // validate and process form here

            $('.error').hide();
            var itemTitle = $("input#add_item_item_title").val();
              if (itemTitle == "") {
              $("label#add_item_item_title_error").show();
              $("input#add_item_item_title").focus();
              return false;
            }

            //add_item();
            nu();
            return false;  
      });
    });
}



function nu(){
   // when using this the var is defined but would rather not have to reuse this//
   var itemTitle = $("input#add_item_item_title").val();
   /////////////////////////////////////////////////////////////////////

   var url = "script.php";
    $.ajax({
                type: 'POST',
                url: url, 
                dataType: 'html',
                data: {
                    itemTitle: itemTitle,
                    groupID: groupID, 
                    unitPrice: unitPrice        
                },
                beforeSend: function() {
                        document.getElementById("message").innerHTML="<span class='blink_me'>Sending..</span>"  ;
                },
                success: function(html) {
                        document.getElementById("message").innerHTML=itemTitle;

                }
    });

}

Answer 1

Remove the var in your variable declaration.

Clarification: You're defining that variable with var so it is only accessible within the scope of that function and any functions defined immediately within it. If you just use myVar = 15; (without the var), the variable will be defined within the global scope. In the browser, this is equivalent to using window.myVar = 15.

Further clarification: Use of global variables usually means you're doing something you shouldn't be. I'm not a purist, but I get the feeling that many people will cry foul. You're running the risk that you reassign that global variable to another value before your callback function has been triggered - it can be a pain in the butt to debug such scoping issues.

In your example, why not just pass the variable to the function, like nu(itemTitle);:

function nu(itemTitle){
    /* blah blah blah */
    /*
     * itemTitle is now available here and directly
     * in any functions that are defined in this
     * part of the code
     */
}