how to sum in for loop in jquery?

Question

I need to show the sum of the values which is coming from two dynamic div but below I mention the static version of the div. Anyone can help me to solve this tiny jquery puzzle :

$(document).ready(function(){
  
  arr = $('#cover div p').map(function() {
    return $(this).html();
  });

  for (i = 0; i < arr.length; i++) {
    var res = parseInt(arr[i]);
    var res = res+parseInt(arr[i]);
    $('#resultTotal').html(res);
  }

});

.slider
{
  background-color: blue;
  color:white;
  padding: 5px 10px;
  margin: 10px;
}

#resultTotal
{
  background-color: green;
  padding: 20px 10px ;
  margin: 10px;
  color:white;
}

<div id="cover">
  <div class="slider">
    <p class="content">100</p>
  </div>
  <div class="slider">
    <p class="content">200</p>
  </div>
</div>

<div id="resultTotal"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Rory McCrossan · Accepted Answer · 2019-09-22 14:41:51Z

2

There's a few issues here. Firstly you should call get() when using map() to only get the array of values you returned instead of an entire collection of jQuery objects.

Secondly, you're doubling the total as you first set res to the value in the array, then you redefine res and add the value to it again... for some reason. You're also looping twice for no good reason; once to create the array and again through the array. Just loop once.

Lastly, as you're working with dynamic content you need to perform this sum logic after the elements have been added. As such, place it in a function and call it when necessary.

The simplest way to achieve this would be to create a total variable which you increment with the text value of the p within an each() loop, like this:

$(document).ready(function() {
  // after you add the dymamic .slider p elements:
  calculateAndDisplayTotal();
});

function calculateAndDisplayTotal() {
  var total = 0;
  $('#cover div p').each(function() {
    total += parseInt($(this).text(), 10);
  });
  
  $('#resultTotal').text(total);
}

.slider {
  background-color: blue;
  color: white;
  padding: 5px 10px;
  margin: 10px;
}

#resultTotal {
  background-color: green;
  padding: 20px 10px;
  margin: 10px;
  color: white;
}

<div id="cover">
  <div class="slider">
    <p class="content">100</p>
  </div>
  <div class="slider">
    <p class="content">200</p>
  </div>
</div>

<div id="resultTotal"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

edited Sep 22, 2019 at 14:41

answered Sep 22, 2019 at 14:31

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

5 Comments

Andy Over a year ago

The OP mentions that these are "two dynamic div" which I assume means that they'll be added to the DOM after it has loaded. Does this code account for this?

Rory McCrossan Over a year ago

It doesn't. However all that would need to change is to put the logic in to a function and then you call that function after the .slider p elements have been added to the DOM. I've edited the question to show a more appropriate example, thanks.

charlietfl Over a year ago

Actually get() not really needed when using OP's for loop

Rory McCrossan Over a year ago

@charlietfl agreed, but the OP is also using map()

charlietfl Over a year ago

Right, but the resultant object does have length. Not a critical issue ...works both ways in OP's case

techie20 · Accepted Answer · 2019-09-22 14:44:52Z

0

Working example,

$(document).ready(function(){
  
  arr = $('#cover>div>p').map(function() {
    return $(this).html();
  });
  
var res = 0;
  for (i = 0; i < arr.length; i++) {
    res = res+parseInt(arr[i]);
    $('#resultTotal').html(res);
  }

});

<div id="cover">
  <div class="slider">
    <p class="content">100</p>
  </div>
  <div class="slider">
    <p class="content">200</p>
  </div>
</div>

<div id="resultTotal"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

edited Sep 22, 2019 at 14:44

answered Sep 22, 2019 at 14:35

techie20

5084 gold badges12 silver badges26 bronze badges

Collectives™ on Stack Overflow

how to sum in for loop in jquery?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related