如何从 htmlelement 中求和 integer

Question

I am trying to get the innerHTML of all elements with classname "money" and sum it. But when I am retrieving it with my code it will place all the digits next to eachother.

var elements = document.getElementsByClassName("money");
    var arr = new Array(elements.length);
    var total = 0;

    for (var i=0; i< arr.length; i++){
        var val = elements[i].innerHTML;
        console.log(val);
        total += parseFloat(val).toFixed(2)
    }
    console.log(total);

The result I'm getting is the following:

image of result

How can I solve this?

Answer 1

toFixed() is converting a number to a string. So you add strings which leads to concatenating.

Sum everything and use toFixed() after you have the final value or use Math.round()

Answer 2

toFixed() returns a string. Parse it (with a unary plus operator), then add to total :

 var elements = document.getElementsByClassName("money"); var arr = new Array(elements.length); var total = 0; for (var i = 0; i < arr.length; i++) { var val = elements[i].innerHTML; console.log(val); total += +parseFloat(val).toFixed(2) } console.log(total);

 <div class="money">100</div> <div class="money">200</div> <div class="money">300</div>