CODEWITHSUNDEEP
javascriptjqueryfunctionvar
dmt
dmt

Reputation: 201

JQuery add/subtract value of button from price

I have a series of button with price values in them. I want to add/subtract the button values from a total value which is in s span.quote-price.

The below code works well and totals up the price but i want to adapt it if possible so that if the button isn't selected or doesn't have a class of selected then the figure isn't added.

At the moment, the price just keeps adding up even if the button has been deselected. Thanks for your help. 

var theTotal = 0;

$('button').click(function() {
  theTotal = Number(theTotal) + Number($(this).val());
  $('span.quote-price').text("£" + theTotal.toFixed(2));
});

$('select').click(function() {
  theTotal = Number(theTotal) + Number($(this).val());
  $('span.quote-price').text("£" + theTotal.toFixed(2));
});

$('button#reset').click(function() {
  $('span.quote-price').html("£0.00");
});

$('span.quote-price').text("£" + theTotal.toFixed(2));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="package_1" value="10.00" name="package_1">Package 1</button>
<button id="package_2" value="20.00" name="package_1">Package 2</button>
<button id="package_3" value="30.00" name="package_1">Package 3</button>

<p><span class="quote-price">0.00</span>
</p>

Upvotes: 1

Views: 1972

Answers (3)

Zim84
Zim84

Reputation: 3517

Just add a toggle for the class and a toggle for the amout. That should do the trick.

var theTotal = 0;

$('button').click(function() {
  theTotal = Number(theTotal) + Number($(this).val());
  $('span.quote-price').text("£" + theTotal.toFixed(2));
  $(this).toggleClass('selected');
  $(this).attr("value", ($(this).val() * -1));
});

$('span.quote-price').text("£" + theTotal.toFixed(2));
button.selected { color: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="package_1" value="10.00" name="package_1">Package 1</button>
<button id="package_2" value="20.00" name="package_1">Package 2</button>
<button id="package_3" value="30.00" name="package_1">Package 3</button>

<p><span class="quote-price">0.00</span>
</p>

I have removed the parts of the script that did not relate to your problem.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337714

It would be a simpler pattern to have a single function which calculates the total which is called on the state change of the button or select element. Try this:

function updateTotal() {
    var total = 0;
    $('button.selected').each(function() {
        total += parseFloat($(this).val());
    });
    total += parseFloat($('select').val());
    $('span.quote-price').text("£" + total.toFixed(2));
}

$('button').click(function() {
    $(this).toggleClass('selected');
    updateTotal();
});
$('select').change(updateTotal);

Working example

Upvotes: 1

indubitablee
indubitablee

Reputation: 8216

something like this? i added class .selected css so you can keep track of what is adding up to the totals and what is not

pretty much the functionality goes like this (changes were made only to $(button).click() function: -if clicked button has class .selected, then subtract value from total and then remove class.

-if clicked button does not have class .selected, then add value to total and add class.

$(document).ready(function() {
    var theTotal = 0;

    $('button').click(function() {
        console.log($(this).hasClass('selected'));
        if($(this).hasClass('selected')) {
            theTotal = Number(theTotal) - Number($(this).val());
            $(this).removeClass('selected');
        }
        else {
            theTotal = Number(theTotal) + Number($(this).val());
            $(this).addClass('selected');
        }
        $('span.quote-price').text("£" + theTotal.toFixed(2));
    });

    $('select').click(function() {
        theTotal = Number(theTotal) + Number($(this).val());
        $('span.quote-price').text("£" + theTotal.toFixed(2));
    });

    $('button#reset').click(function() {
        $('span.quote-price').html("£0.00");
    });

    $('span.quote-price').text("£" + theTotal.toFixed(2));
});
.selected {
    color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="package_1" value="10.00" name="package_1">Package 1</button>
<button id="package_2" value="20.00" name="package_1">Package 2</button>
<button id="package_3" value="30.00" name="package_1">Package 3</button>

<p><span class="quote-price">0.00</span>
</p>

Upvotes: 0

Related Questions