how to do sum of two content html into jQuery script

Question

I have two content which are :

<div class="card text-center">
  <div class="card-header">
    <h5 >Prime</h5>
  </div>
  <div class="card-body">
    <h2 id="Prime_id" class="card-title"></h2>
  </div>
</div>

<div class="card text-center">
  <div class="card-header">
    <h5 >Benif</h5>
  </div>
  <div class="card-body">
    <h2 id="benif_id" class="card-title"></h2>
  </div>
</div>

<div class="card text-center">
  <div class="card-header">
    <h5 >total</h5>
  </div>
  <div class="card-body">
    <h2 id="total_id" class="card-title"></h2>
  </div>
</div>

Every content have this example of value :

<script>
  console.log($("#benif_id").html()); //11.578.351 $
  console.log($("#Prime_id").html()); //5.877.210 $
</script>

I want to do $("#Total_id") = $("#benif_id") + $("#Prime_id") but it's not work.

I was doing like this :

<script>
  $("#total_id").text(parseFloat($("#benif_id").html()) + parseFloat($("#Prime_id").html()) + '$');
</script>

instead of

$("#total_id") = 17,455,561 $

i think that i need to delete $ character first after delete all separators to int value after i do the sum but i don't know how — user6223604
– user6223604, Commented Oct 25, 2018 at 8:21

Mamun · Accepted Answer · 2018-10-25 08:44:14Z

1

You have to use .text() to get and set the value from/to the respective elements. You also have to convert the values to Number() before adding them. You also have to replace() the $ with empty string so that it no longer remains in the text.

var benif = $("#benif_id").text().replace('$', '');
var prime = $("#Prime_id").text().replace('$', '');
$("#Total_id").text(Number(benif)  + Number(prime) + ' $');

edited Oct 25, 2018 at 8:44

answered Oct 25, 2018 at 8:19

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

1 Comment

user6223604 Over a year ago

i test your answer so i have NaN value to total_id

Jelle Bruisten · Accepted Answer · 2018-10-25 08:25:17Z

0

Try this:

$("#total_id").text((
parseFloat($("#benif_id").html().split('.').join("")) + 
parseFloat($("#Prime_id").html().split('.').join(""))) + '$')

removing the dots when parsing the number

answered Oct 25, 2018 at 8:25

Jelle Bruisten

4416 silver badges11 bronze badges

Comments

Tân · Accepted Answer · 2018-10-25 08:28:16Z

0

Maybe what you're looking for:

var benif = $("#benif_id").text().replace(/[.\s$]/g, '');
var prime = $("#Prime_id").text().replace(/[.\s$]/g, '');

$("#Total_id").text((+benif + +prime) + ' $');

answered Oct 25, 2018 at 8:28

Tân

1

Comments

MahalingaM SubramaniyaM · Accepted Answer · 2018-10-25 09:56:12Z

try this

$("#benif_id").html('11.578.351 $'); //11.578.351 $
 $("#Prime_id").html('5.877.210 $'); //5.877.210 $
  var Benif=$("#benif_id").html().replace(/\./g,'').replace('$','');
  var Prime=$("#Prime_id").html().replace(/\./g,'').replace('$','');
  var total=+Benif + + Prime;
 //alert(total.toLocaleString())
  $("#total_id").text(total.toLocaleString() + ' $');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="card text-center">
  <div class="card-header">
    <h5 >Prime</h5>
  </div>
  <div class="card-body">
    <h2 id="Prime_id" class="card-title"></h2>
  </div>
</div>

<div class="card text-center">
  <div class="card-header">
    <h5 >Benif</h5>
  </div>
  <div class="card-body">
    <h2 id="benif_id" class="card-title"></h2>
  </div>
</div>

<div class="card text-center">
  <div class="card-header">
    <h5 >total</h5>
  </div>
  <div class="card-body">
    <h2 id="total_id" class="card-title"></h2>
  </div>
</div>

Collectives™ on Stack Overflow

how to do sum of two content html into jQuery script

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related