Adding two dynamically generated HTML values together with jQuery

Question

I am creating a pricing interface that will ultimately yield two different prices for the user (experience + collection). I will need to then combine these prices in order to display a total price. The experience and collection prices are being displayed depending on the selections the user makes, and they currently work great.

But now I can't figure out how to add the html values of the two html elements. The class total-cost is where this added value should display. I've tried quite a few things in hopes of figuring it out myself, but no luck.

Thanks!

HTML (cleaned up)

<div class="pricing-experience">

    <div class="flex_column">
        <span class="cost1">3000</span>
    </div>

    <div class="flex_column">
        <span class="cost1">4000</span>
    </div>

    <div class="flex_column">
        <span class="cost1">5000</span>
    </div>

</div>


<div class="pricing-collection">

    <div class="flex_column">
        <span class="cost2">300</span>
    </div>

    <div class="flex_column">
        <span class="cost2">450</span>
    </div>

    <div class="flex_column">
        <span class="cost2">700</span>
    </div>

</div>


<div class="experience-cost">
//cost1's value
</div>

<div class="collection-cost">
//cost2's value
</div>

<div class="total-cost">
//cost1 and cost2's added value
</div>

jQuery

$('.pricing-experience, .pricing-collection').on('click', '.flex_column', function() {

    var experienceCost = $(this).find('.cost1').html(),
        collectionCost = $(this).find('.cost2').html();

    $(this).addClass('elephant').siblings().removeClass('elephant');

    // console.log(experienceCost);
    // console.log(collectionCost);

    $('.experience-cost').html(experienceCost);

    $('.collection-cost').html(collectionCost);

    $('.total-cost').html(experienceCost + collectionCost);

});

Can you show the html of the involved sections of your page? — user2399035
– user2399035, Commented May 23, 2015 at 11:43
There are 3 values .cost1 and 3 values .cost2. What do you want to add up? — Mircea
– Mircea, Commented May 23, 2015 at 12:21

Tanya Sinha · Accepted Answer · 2015-05-23 12:42:44Z

try this:

for each div with class .cost1 and .cost2 add value in a variable and then display it in div

JS:

$(".btn1").click(function () {

var experienceCost = 0;
var collectionCost = 0;
var totalCost = 0;
$('.cost1').each(function () {
    experienceCost += parseFloat($(this).text());
});
$('.cost2').each(function () {
    collectionCost += parseFloat($(this).text());
});

$('.experience-cost').text(experienceCost);
$('.collection-cost').text(collectionCost);
$('.total-cost').text(experienceCost + collectionCost);
});

HTML:

<div class="pricing-experience">
<div class="flex_column"> <span class="cost1">3000</span>

</div>
<div class="flex_column"> <span class="cost1">4000</span>

</div>
<div class="flex_column"> <span class="cost1">5000</span>

</div>
</div>
<div class="pricing-collection">
<div class="flex_column"> <span class="cost2">300</span>

</div>
<div class="flex_column"> <span class="cost2">450</span>

</div>
<div class="flex_column"> <span class="cost2">700</span>

</div>
</div>
<div class="experience-cost"></div>
<div class="collection-cost"></div>
<div class="total-cost"></div>
<button class="btn1">experienceCost</button>

Working Fiddle

Mircea · Accepted Answer · 2015-05-23 12:44:22Z

0

You need to find the matching values on click:

var k=0, e=this;
while (e = e.previousElementSibling) { ++k;}

Here is a rough demo: http://jsfiddle.net/y3Ls4zso/1/

If I understood what you want to do here...

answered May 23, 2015 at 12:44

Mircea

11.7k26 gold badges67 silver badges98 bronze badges

Collectives™ on Stack Overflow

Adding two dynamically generated HTML values together with jQuery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related