Summing up values in custom attr loop in JavaScript

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>

Answers


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

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>

You just need to replace

var valuetostr = valueofthis.toString();

with

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

Need Your Help

ReferenceError: endsWith is not defined

javascript java jsp extjs extjs3

In my code, I am trying to call .jsp file using jmaki call in extjs 3.4. Here is my code.

Yiiwheels Select Box Association With Model

php yii yii-extensions

I am trying to replace yii default select widget with yiiwheels select widget.