Question

For some reason i can’t get the variable ‘total’ to define at all…

I defined it on like 74 but it does’t want to stick for some reason.. what am i doing wrong? Thanks in advance!

$(document).ready(function() {

    function getParameterByName(name)
    {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regexS = "[\\?&]" + name + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(window.location.search);
        if(results == null)
            return "";
        else
            return decodeURIComponent(results[1].replace(/\+/g, " "));
    }

    $(".tab-content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab-content:first").show(); //Show first tab content


    $('.question-form-submit').click(function(e) {
        e.preventDefault();
        var activeTab = '#'+$(this).attr('name');
        var activeClass = activeTab.substr(5);
        $("ul.tabs li").removeClass("active"); 
        $('ul li:nth-child('+activeClass+')').addClass("active"); //Add "active" class to selected tab
        $(".tab-content").hide(); //Hide all tab content
        $(activeTab).fadeIn(); //Fade in the active ID content


        $('.meter-value').removeClass('meter-width');

        switch (activeClass) {
            case '2' :
                $('.meter-value').attr('style', 'background-color: #9496c9; width: 46.5%;');
                break;

            case '3' :
                $('.meter-value').attr('style', 'background-color: #9496c9; width: 67%;');
                break;

            case '4' :
                $('.meter-value').attr('style', 'background-color: #9496c9; width: 100%;');
                break;

        }

        return false;
    });

    $('.quantity, .init_cost').change(function() {

        var row_id = $(this).attr('id');
        var row_number = row_id.substr(9);
        var item_cost = $('#cost_'+row_number).attr('value');
        var item_quantity = $('#quantity_'+row_number).attr('value');
        var final_cost = item_cost * item_quantity;

        $('#final_cost_'+row_number).val(final_cost).formatCurrency();;

    });

    $('.row input').each(function(index) {

        var row_id = $(this).attr('id');
        var row_number = row_id.substr(9);
        var item_cost = $('#cost_'+row_number).attr('value');
        var item_quantity = $('#quantity_'+row_number).attr('value');
        var final_cost = item_cost * item_quantity;

        $('#final_cost_'+row_number).val(final_cost).formatCurrency();;

    });

        var total = 0;
        $('.final_cost').each(function(index) {

            var final_cost = $(this).attr('value').substr(1);
            var total = total + final_cost;
            console.log(total);

        })

});

Answer 1

The total in the each function is shadowing the outer one.

A simpler example of the same thing is here:

(function()
 {
     var total = 1;
     console.log("total 1: " + total);
     (function()
      {
          console.log("total 2: " + total);
          var total = total + 3;
          console.log("total 3: " + total);
      })()
 })();

In addition to the shadowing, you have to consider hoisting. Because the inner var is hoisted to the top, the inner function is roughly equivalent to:

function()
{
    var total = undefined;
    console.log("total 2: " + total);
    total = total + 3;
    console.log("total 3: " + total);
}

In this case, I think you simply don’t want the inner var keyword. In other cases, you would use a different variable name.