Accessing variables declared outside of jquery functions

Question

I have been having some issues accessing and updating variables declared inside document.ready function. Everytime i attempt to do alerts inside my functions the values of these functions. Here is my document. ready function with variables and functions within them. Any help at all with this would be greatly appreciated.

 /***********************************************************/ 
        var bdv; 
        var mv; 
        var cYear; 
        var _miles; 
        var cpo_input;

 /* -------------------------------------------------*/

        var _prestige;
        var car_type; 
        var acc_history;
        var _aam;
        var avg_mileage;

 /***********************************************************/  
$(document).ready(function() {

/***********************************************************/ 
        bdv = $("#base_dv").val(); 
        mv = $('input:text[name="field8"]').val(); 
        cYear = $('input:text[name="field2"]').val(); 
        _miles = $('input:text[name="field5"]').val(); 
        cpo_input = $('input:text[name="field19"]');

 /* -------------------------------------------------*/

        _prestige = 0.00;
        car_type= 0; 
        acc_history = 0;
        _aam = 0.00;
        avg_mileage = 0.00;

 /***********************************************************/             
     if ('<?php echo $job[0]['
     job_type '] ?>' == "33") {

         $('input:radio[name="field32"][value = val1]').attr("disabled", true);
         $('input:radio[name="field32"][value = val2]').attr("disabled", true);

         $("[name='field20[]']").each(function () {
             $(this).change(function () {
                 $('input:radio[name="field7"]').each(function () {
                     if (!$('input:radio[name="field7"]').is(':checked')) {
                         alert("Please Select 2 or 4 door car");
                         $("[name='field20[]']").each(function () {
                             $(this).removeAttr('checked');
                         });
                     } else if ($('input:radio[name="field7"]').is(':checked')) {
                         return false;
                     }
                 });
                 $(this).click(function () {
                     bdv = damage_severity(mv, bdv);
                     _aam = average_annual_mileage_factor(_miles, mv);
                     avg_mileage = avg_mileage_calc(_miles, cYear);

                     alert("Market Value: " + mv);
                     alert("Miles Reporting: " + _miles);
                     alert("Base DV:" + bdv);
                     alert("Average Annual Mileage" + _aam);
                     alert("Average Mileage outside func: " + avg_mileage);
                 });
             });
         });
     });

Answer 1

bdv, _aam and avg_mileage seems to have the same values as they had when document.ready was triggered, since you never update these values before using them.

I'd move the declarations back to the $(document).ready() and do something like this:

$(document).ready(function () {
    var  bdv, aam =  ...,
         $bdv = $("#base_dv"),
         $mv = $('input:text[name="field8"]'),
                 :
         ;
                 :
    $(this).click(function () {
        bdv = damage_severity($mv.val(), $bdv.val());
                 :
    });
                 :
});

Notice also, that you've to move the $(this).click(); out from $(this).change();. As it is now, your code will attach a new click listener to the element every time onchange is triggered on that element.

Answer 2

Declare them outside of .ready(). Populate them inside .ready().

Also, there's a lot of functionality that you have, that does not need to be in .ready() in the first place.