Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

205
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda