Cannot read property 'toFixed' of undefined (Corrected)

Question

I've been looking at the code and breaking it apart but I can't seem to find what's causing the error. I'm not sure what I'm doing wrong with the .toFixed that's breaking the code. Can you help?

Code (corrected)

<script type="text/javascript">
    $(document).ready(function(){
        function getTotal() {
            var quantity =  $('#tmp_quantity').val();
            var name = "formComponentsMap['order'].countryName";
            var countryValue = $('input[name="' + name + '"]').val(); 
            var tax = 0.00;
            var shipping = 0.00;

            var stateName = "formComponentsMap['order'].stateId";
            var stateValue = $('select[name="' + stateName + '"]').val(); 
            // If state value is Maryland (33) need to add 6% sales tax
            if (stateValue == 33) {
                tax = .06;  
            }

            if ($('#ADS_INTL').is(':checked') || $('#ADS_US').is(':checked')) {

                if ($('#ADS_INTL').is(':checked') && quantity == 1) {
                    shipping = 14.95;
                    var ads = '';
                }
                else {

                    shipping = 0.00;
                    var ads = '<span style="color: #A3BF3F;">&#x2714;</span> with Auto-Delivery Service';
                }
            }
            else {
                var ads = '';
                if (countryValue != "UNITED STATES" || typeof countryValue == 'undefined') {
                    shipping = 14.95;
                }
                else {
                  shipping = 6.95;  
                }
            }
            var subtotal = 0.00;
            $('#quantity').replaceWith('<div id="quantity">' + quantity + '</div>');
            if (quantity == 6) {
                $('#bottle-image').replaceWith('<div id="bottle-image"> <img src="https://nmhfiles.com/images/nsn/650SSO2_FPOF/Soothanol-6Bottles.jpg" alt="Soothanol" width="150" /></div>');
                subtotal = 149.85;
            }

            else if (quantity == 3) {
                $('#bottle-image').replaceWith('<div id="bottle-image"> <img src="https://nmhfiles.com/images/nsn/650SSO2_FPOF/Soothanol-3Bottles.jpg" alt="Soothanol" width="150" /></div>');
                subtotal = 99.90;
            }
            else if (quantity == 1) {
                $('#bottle-image').replaceWith('<div id="bottle-image"> <img src="https://nmhfiles.com/images/nsn/650SSO2_FPOF/Soothanol-1Bottle.jpg" alt="Soothanol" width="150" /></div>');
                subtotal = 49.95;
            }
            $('#ads').replaceWith('<div id="ads">' + ads + '</div>');     
            $('#subtotal').replaceWith('<div id="subtotal">' + subtotal.toFixed(2) + '</div>');               
            $('#tax').replaceWith('<div id="tax">' + (tax * subtotal).toFixed(2) + '</div>');
            $('#shipping').replaceWith('<div id="shipping">' + shipping.toFixed(2) + '</div>');
            var total = subtotal + (tax * subtotal) + shipping;
            $('#total').replaceWith('<div id="total">' + total.toFixed(2) + '</div>');        
        }

        $("div[class^='tim']").click(function(){
                 var radioValue = $(this).attr('id');

                 if (typeof radioValue != "undefined") {

                 var quantity = radioValue.split('_timSelect_'); 
                  $('#tmp_quantity').val(quantity[1]);
                  var quantity =  $('#tmp_quantity').val();
                  getTotal();
                  }
            });  

        $('#__billToZipCode').click(function(){
            getTotal();     
        });
        $('#ADS_US').click(function(){
            getTotal();     
        });     
        $('#ADS_INTL').click(function(){
            getTotal();     
        });     

    });
</script>

Answer 1

You'll error if quantity is not 1, 3 or 6 as subtotal will not be set. Try changing it to:

var subtotal = 0;
if (quantity == 6) {
    $('#bottle-image').replaceWith('<div id="bottle-image"> <img src="https://nmhfiles.com/images/nsn/650SSO2_FPOF/Soothanol-6Bottles.jpg" alt="Soothanol" width="150" /></div>');
    subtotal = 149.85;
} else if (quantity == 3) {
    $('#bottle-image').replaceWith('<div id="bottle-image"> <img src="https://nmhfiles.com/images/nsn/650SSO2_FPOF/Soothanol-3Bottles.jpg" alt="Soothanol" width="150" /></div>');
    subtotal = 99.90;
} else if (quantity == 1) {
   $('#bottle-image').replaceWith('<div id="bottle-image"> <img src="https://nmhfiles.com/images/nsn/650SSO2_FPOF/Soothanol-1Bottle.jpg" alt="Soothanol" width="150" /></div>');
   subtotal = 49.95;
}

Answer 2

The issue is because you are declaring the subtotal variable inside the if statement blocks. It is then out of scope when you use it in the replaceWith statements - hence the undefined error. Declare the variable in a scope accessible to all required blocks. Try this:

$('#bottle-image').replaceWith('<div id="bottle-image"> <img src="https://nmhfiles.com/images/nsn/650SSO2_FPOF/Soothanol-' + quantity  + 'Bottles.jpg" alt="Soothanol" width="150" /></div>');

var subtotal = 0;
if (quantity == 6) {
    subtotal = 149.85;
}
else if (quantity == 3) {
    subtotal = 99.90;
}
else if (quantity == 1) {
    subtotal = 49.95;
}

$('#ads').replaceWith('<div id="ads">' + ads + '</div>');     
$('#subtotal').replaceWith('<div id="subtotal">' + subtotal.toFixed(2) + '</div>');               
$('#tax').replaceWith('<div id="tax">' + (tax * subtotal).toFixed(2) + '</div>');
$('#shipping').replaceWith('<div id="shipping">' + shipping.toFixed(2) + '</div>');

var total = subtotal + (tax * subtotal) + shipping;
$('#total').replaceWith('<div id="total">' + total.toFixed(2) + '</div>');