Sum numbers returns NaN

Question

I'm trying to do a sum of numbers inside div's, so, I did:

$(document).ready(function() {
    var numbers, sumNumbers;

    $(".item").each(function() {
  	numbers = $(this).children().text();
        numbers = +numbers;
    
        sumNumbers += numbers;
    });
  
    console.log(sumNumbers);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="item">
  <span class="itemNum">0</span>
</div>

<div class="item">
  <span class="itemNum">2</span>
</div>

<div class="item">
  <span class="itemNum">1</span>
</div>

But, same converting the numbers from text to number with +numbers is returned NaN, why? I've already tried with Number(numbers) too but the result is the same.

Answer 1

You didn't initialize sumNumbers, so you get undefined + a number = NaN

var numbers, sumNumbers = 0;

Answer 2

Try this

var numbers=0, sumNumbers=0; //initilize numbers & sumNumbers;

$(".item").each(function () {
    numbers = $(this).children().text() * 1; // *1 convert string to number

    sumNumbers += numbers;
});

console.log(sumNumbers);