Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

206
Vistas
Why this function is pushing only one item in array?
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?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda