CODEWITHSUNDEEP
javascriptjquery
user6223604
user6223604

Reputation:

how to do sum of two content html into jQuery script

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 $

Upvotes: 2

Views: 71

Answers (4)

MahalingaM SubramaniyaM
MahalingaM SubramaniyaM

Reputation: 99

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>

Upvotes: 0

Mamun
Mamun

Reputation: 68933

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

Upvotes: 1

T&#226;n
T&#226;n

Reputation: 1

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

Upvotes: 0

Jelle Bruisten
Jelle Bruisten

Reputation: 441

Try this: 

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

removing the dots when parsing the number

Upvotes: 0

Related Questions