McKeene McKeene - 3 months ago 16
jQuery Question

Adding together calculated variables

I am creating a price table where I i calculate a subtotal price for two ticket types based on a fixed price and the number of tickets they select.
These two functions are working as they should.
Afterwards I would like to calculate the grand total by adding together the the two subtotals.
What am I doing wrong?

<div class="row">
<div class="ticket-cat">
<div class="col-xs-2">
<p id="price-adult" data-price="12.77">€ 12.77</p>
</div>
<div class="col-xs-2">
<select class="tickets-selection form-control" value="0" name="ticket-select-adult" id="ticket-select-adult">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-xs-3">
<p id="adult-total" class="text-right">
<span class="valuta hidden">€</span>
<span class="total"></span>
</p>
</div>
</div>
</div>
<div class="row">
<div class="ticket-cat">
<div class="col-xs-2">
<p id="price-student" data-price="9.41">€ 9.41</p>
</div>
<div class="col-xs-2">
<select class="tickets-selection form-control" value="0" name="ticket-select-student" id="ticket-select-student">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-xs-3">
<p id="student-total" class="text-right">
<span class="valuta hidden">€</span>
<span class="total hidden"></span>
</p>
</div>
</div>
</div>


jQuery

$(function () {
var $adultTotal = $("#adult-total .total");
var adultPrice = parseFloat($("#price-adult").data("price"));

// Fixes NaN and calculates the total price for adult tickets
$('#ticket-select-adult').change(function () {
var adultTicketsCount = parseInt(this.value, 10);
var adultPriceTotal = isNaN(adultTicketsCount) ?
' n/a ' :
(adultTicketsCount * adultPrice).toFixed(2);
$adultTotal.text(adultPriceTotal);
});

var $studentTotal = $("#student-total .total");
var studentPrice = parseFloat($("#price-student").data("price"));

// Fixes NaN and calculates the total price for student tickets
$('#ticket-select-student').change(function () {
var studentTicketsCount = parseInt(this.value, 10);
var studentPriceTotal = isNaN(studentTicketsCount) ?
' n/a ' :
(studentTicketsCount * studentPrice).toFixed(2);
$studentTotal.text(studentPriceTotal);
});

// Add together the variables
totalPriceTickets = 0;
totalPriceTickets = parseInt(adultPriceTotal) + parseInt(studentPriceTotal);
console.log(totalPriceTickets, "Hello, world!");

});


https://jsfiddle.net/mckeene/rLnv348x/

Answer

Some of the problems were due to variable's being out of scope, so I've defined them at the top. A console.log() of the total should display each time a value is changed. This was another one of your problems, the total was being displayed initially rather than each time the values were changed.

$(function () {
    var $adultTotal = $("#adult-total .total");
    var adultPrice = parseFloat($("#price-adult").data("price"));
    var $studentTotal = $("#student-total .total");
    var studentPrice = parseFloat($("#price-student").data("price"));
    var adultPriceTotal = 0;
    var studentPriceTotal = 0;
    var totalPriceTickets = null;

    // Fixes NaN and calculates the total price for adult tickets
    $('#ticket-select-adult').change(function () {
        var adultTicketsCount = parseInt(this.value, 10);
        adultPriceTotal = isNaN(adultTicketsCount) ?
            0 :
            (adultTicketsCount * adultPrice).toFixed(2);
        $adultTotal.text(adultPriceTotal);

        totalPriceTickets = calculateTotal(adultPriceTotal, studentPriceTotal);
    });

    // Fixes NaN and calculates the total price for student tickets
    $('#ticket-select-student').change(function () {
        var studentTicketsCount = parseInt(this.value, 10);
        studentPriceTotal = isNaN(studentTicketsCount) ?
            0 :
            (studentTicketsCount * studentPrice).toFixed(2);
        $studentTotal.text(studentPriceTotal);

        totalPriceTickets = calculateTotal(adultPriceTotal, studentPriceTotal);
    });

    function calculateTotal(adultPriceTotal, studentPriceTotal) {
        var total = parseInt(adultPriceTotal) + parseInt(studentPriceTotal);

        console.log(total)
        return total;
    }
});