Why this function is pushing only one item in array?

Question

function createBar() {

function datas(date, balance) {
this.date = date;
this.balance = balance;
}
var data = new datas(date.value, balance.value);
var balances = [];
balances.push(data);
balances.sort(function(a,b){
return b.balance - a.balance;
});
var topMark = balances[0].balance;
var heightUnit = "px";
var heightCalculate = function(amt) {
var x = 100 / (topMark/amt);
var y = (400/100) * x; 
return y; 
};
balances.forEach(function(item, index, arr) {
var bars = document.createElement("div");
bars.classList.add('barclass');
bars.style.height = heightCalculate(item.balance) + heightUnit;
bars.style.top = 500 - heightCalculate(item.balance) + heightUnit;
graphContainer.appendChild(bars);
});

date.value = "";
balance.value = "";
}

.barclass {
width : 4px;
margin-right : 1px; 
margin-left : 1px; 
display : inline; 
float : left; 
position: relative;
}

The function above is creating bars of same height every time(on click of a button) regardless of value of "balance" property i think it's not pushing more than one item in array that's why it's creating the bar of same height every time the respective button is clicked i don't know what's wrong with this can you spot the mistake?

Answer 1

One of the comments below your answer is correct and I upvoted it. Here is just a little more detail on what @Strella meant-

Each time the createBar function is called, the balances variable is re-declared and re-initialized to an empty array. If you'd like that variable to be persistent, you should declare an initialize it outside of that function. Here is an example of how you might update your code:

var balances = [];  // NEW balances declaration & initialization outside of the function
function createBar() {

    function datas(date, balance) {
        this.date = date;
        this.balance = balance;
    }
    var data = new datas(date.value, balance.value);
    //var balances = [];    // NOTE: balances used to be re-initialized here
    balances.push(data);
    balances.sort(function(a,b){
        return b.balance - a.balance;
    });
    var topMark = balances[0].balance;
    var heightUnit = "px";
    var heightCalculate = function(amt) {
        var x = 100 / (topMark/amt);
        var y = (400/100) * x; 
        return y; 
    };
    balances.forEach(function(item, index, arr) {
        var bars = document.createElement("div");
        bars.classList.add('barclass');
        bars.style.height = heightCalculate(item.balance) + heightUnit;
        bars.style.top = 500 - heightCalculate(item.balance) + heightUnit;
        graphContainer.appendChild(bars);
    });

    date.value = "";
    balance.value = "";
}

On another note- you may have another bug in your code. It is not entirely clear what you're aiming to do here, but my hunch is that you'd like to add a single bar element to a bar graph. You'd also like for all the bars in the graph to be sorted in ascending(?) order. I think what you're going to end up doing here though is adding ALL of the bars to the graph again every time a new bar is created. You might want to empty the graph container of all children before the balances.forEach block of code.