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; }La función anterior está creando barras de la misma altura cada vez (al hacer clic en un botón) independientemente del valor de la propiedad "equilibrio". Creo que no está presionando más de un elemento en la matriz, por eso está creando la barra de la misma altura cada vez Se hace clic en el botón. No sé qué tiene de malo. ¿Puedes detectar el error?
Uno de los comentarios debajo de su respuesta es correcto y lo voté. Aquí hay un poco más de detalles sobre lo que @Strella quiso decir:
Cada vez que se llama a la función createBar, la variable de saldos se vuelve a declarar y se reinicializa en una matriz vacía. Si desea que esa variable sea persistente, debe declararla e inicializarla fuera de esa función. Este es un ejemplo de cómo puede actualizar su código:
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 = ""; }En otra nota, es posible que tenga otro error en su código. No está del todo claro lo que pretende hacer aquí, pero tengo la corazonada de que le gustaría agregar un solo elemento de barra a un gráfico de barras. También le gustaría que todas las barras del gráfico se ordenaran en orden ascendente (?). Sin embargo, creo que lo que vas a terminar haciendo aquí es agregar TODAS las barras al gráfico nuevamente cada vez que se crea una nueva barra. Es posible que desee vaciar el contenedor de gráficos de todos los elementos secundarios antes del bloque de código balances.forEach.