Adding two dynamically generated HTML values together

Question

Asking this question a second time but providing much more detail this time around, providing a live example and asking a new question as well. The answers to my first question were irrelevant to my needs due to poor communication, and I still need help.

I am creating a pricing interface that will ultimately yield in a user selecting two products (from a selection of 6 - mix & match), which will create two individual prices (one experience price and one collection price in this case). 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 just fine.

But now I can't figure out how to add the html values of the two html elements that the user selects. 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.

//FOR SELECTING EXPERIENCE AND COLLECTION PACKAGES

$('.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);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

possible duplicate of Adding two dynamically generated HTML values together with jQuery — u_mulder
– u_mulder, Commented May 23, 2015 at 20:25
@u_mulder I received two answer that were not inline with what I was looking for, unusable. The new question has been restructured to be more clear, provides a live example, provides more jQuery, and provides an additional question. I have also flagged my old question for deletion. — Delto
– Delto, Commented May 23, 2015 at 20:27
@Delto Generally a live jsFiddle is more useful, maybe you could consider adding that. — Elliot Bonneville
– Elliot Bonneville, Commented May 23, 2015 at 20:30
experienceCost is undefined which is why totalCost is never being calculated. Where do you set cost1 and cost2? — jcuenod
– jcuenod, Commented May 23, 2015 at 20:31

jcuenod · Accepted Answer · 2015-05-23 20:47:24Z

3

Your problem is in your click event. this is scoped down to the element that is the target of the event. I've used your elephant class to find the selected elements so I've moved this line first:

$(this).addClass('elephant').siblings().removeClass('elephant');
var experienceCost = $('.elephant .cost1').html(),
    collectionCost = $('.elephant .cost2').html(),
    totalCost = parseInt(experienceCost, 10) + parseInt(collectionCost, 10);

A better way to do this would be to use global variables. Something like (untested):

var experienceCost, collectionCost;
$(document).ready(function(){
    /* your code */

    //I've invented the class "pricing_column" to improve this selector
    $(document).on('click', '.pricing_column .flex_column', function() {
        $(this).addClass('elephant').siblings().removeClass('elephant');
        if ($(this).hasClass("pricing-experience"))
        {
            experienceCost = $(this).find('.cost1').html()
        }
        else
        {
            collectionCost = $(this).find('.cost2').html()
        }
        //etc.
    }
})

edited May 23, 2015 at 20:47

answered May 23, 2015 at 20:34

jcuenod

58.9k15 gold badges71 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Delto Over a year ago

Perfect, this did the trick! I will be researching your alternative method (still in the process of learning jQuery) and I'll hit you back with some feedback. Thanks so much! Any way you could help me with the 'bonus' question I posted above?

jcuenod Over a year ago

Glad I could help! To be honest, for the sake of stackoverflow, you need to ask other questions, not just have discussions in the comments.

Delto Over a year ago

Okay, maybe I'll ask it in another question instead with a JSFiddle example. A quick question though... when you define a variable in the click event (such as experienceCost and collectionCost), does it save the data/information into the global variables with the same name? I ask this because I see that the global variables are only names. And then when I call the aforementioned global variables in different parts of my code, do they give me the html value (cost1 in this case) to be used in other parts of my code so long as the relevant click event has been executed?

jcuenod Over a year ago

@Delto Take a look at adequatelygood.com/JavaScript-Scoping-and-Hoisting.html

st2rseeker · Accepted Answer · 2015-05-23 20:36:37Z

1

When you click on an option the "this" has either experienceCost or collectionCost - making the parseInt of the other to fail and the total cost become NaN.

Would advise having two variables outside the function and update them - or access the selection via proper selector instead of "this".

answered May 23, 2015 at 20:36

st2rseeker

4831 gold badge5 silver badges29 bronze badges

Collectives™ on Stack Overflow

Adding two dynamically generated HTML values together

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related