Summing up values in custom attr loop in JavaScript

Question

I have a loop which generates <li> with custom attribute filesize, now I want to search all <li> with this class and sum the value, but instead it returns two values next to each other and not summing the values.

https://jsfiddle.net/y6yLL0yv/1/

var myElements = jQuery(".fileRess");
var sumoffilessize = 0;
for (var i = 0; i < myElements.length; i++) {
    var valueofthis = myElements.eq(i).attr("sizefile");
    var valuetostr = valueofthis.toString();
    var sumoffilessize = (valuetostr + sumoffilessize);
}

alert(sumoffilessize);

HTML:

<div id="fileInfo1">
    <div style="clear:both;padding:5px;" class="fileRess" sizefile="206519" id="fileres_0">
        <input size="1" type="file" class="file" name="attach[]" id="attacher" style="display:none" multiple="" value="undefined">206519 </div>
    <div style="clear:both;padding:5px;" class="fileRess" sizefile="290284" id="fileres_1">
        <input size="1" type="file" class="file" name="attach[]" id="attacher" style="display:none" multiple="" value="undefined">290284 </div>
</div>

<div id="result"></div>

Convert the value read from [DOM(**string**) to Number](http://stackoverflow.com/questions/1133770/how-do-i-convert-a-string-into-an-integer-in-javascript) — Tushar, Mar 07 '16 at 05:35

Rajaprabhu Aravindasamy · Accepted Answer · 2016-03-07T05:46:30.650

Try to convert the string that you got from sizefile attribute to a number by using parseInt(numberString) before doing summation of it,

var myElements = jQuery(".fileRess");
var sumoffilessize = 0;
for (var i = 0; i < myElements.length; i++) {
  sumoffilessize += parseInt(myElements.eq(i).attr("sizefile")
}

alert(sumoffilessize);

If you do not convert it, then string concatenation will be happened since + is common for string concatenation and for mathematical addition. It will do string concatenation when it meets a single string operand.

DEMO

score 0 · Answer 2 · edited May 23 '17 at 11:50

The value read from the DOM is the string. And + will work as string concatenation operator if any of the operands is string.

The string need to be converted to Number when read from DOM and then perform arithmetic operations on it.

There are many options to convert string to number. See How do I convert a string into an integer in JavaScript?

var total = 0;

// Iterate over all the elements having the `fileRess` class
$('.fileRess').each(function () {
    // Get the attribute value from DOM
    // Cast to Number by using unary `+` operator
    // Add to the `total` variable
    total += +$(this).attr('sizefile');
});

$('#result').text('Total: ' + total);

#result {
  margin: 10px;
  color: green;
  font-weight: bold
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="fileInfo1">
    <div style="clear:both;padding:5px;" class="fileRess" sizefile="206519" id="fileres_0">
        <input size="1" type="file" class="file" name="attach[]" id="attacher" style="display:none" multiple="" value="undefined">206519 </div>
    <div style="clear:both;padding:5px;" class="fileRess" sizefile="290284" id="fileres_1">
        <input size="1" type="file" class="file" name="attach[]" id="attacher" style="display:none" multiple="" value="undefined">290284 </div>
</div>

<div id="result"></div>

var total = 0;

// Iterate over all the elements having the `fileRess` class
$('.fileRess').each(function () {
    // Get the attribute value from DOM
    // Cast to Number by using unary `+` operator
    // Add to the `total` variable
    total += +$(this).attr('sizefile');
});
console.log(total);

Updated Fiddle

score 0 · Answer 3 · answered Mar 07 '16 at 11:39

0

You just need to replace

var valuetostr = valueofthis.toString();

with

var valuetostr = parseInt(valueofthis.toString());

answered Mar 07 '16 at 11:39

Tushar

140
7

Summing up values in custom attr loop in JavaScript

3 Answers3

DEMO