时间戳

首页 > 解决方案 > 为什么这个函数只推送数组中的一项？

javascript - 为什么这个函数只推送数组中的一项？

问题描述

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;
}

上面的函数每次都创建相同高度的条（单击按钮），无论“平衡”属性的值如何，我认为它不会在数组中推送多个项目，这就是为什么它每次都创建相同高度的条的原因按钮被点击我不知道这是怎么回事你能发现错误吗？

标签： javascriptcssarrays

解决方案

您的答案下方的评论之一是正确的，我对此表示赞同。这里只是关于@Strella 的意思的更多细节-

每次调用 createBar 函数时，都会重新声明 balances 变量并重新初始化为空数组。如果您希望该变量是持久的，您应该在该函数之外声明一个初始化它。以下是如何更新代码的示例：

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 = "";
}

另一方面，您的代码中可能还有另一个错误。目前尚不完全清楚您在这里的目标是什么，但我的直觉是您想将单个条形元素添加到条形图中。您还希望图表中的所有条都按升序（？）排序。我认为您最终会在这里做的就是每次创建新条时再次将所有条添加到图表中。您可能希望在 balances.forEach 代码块之前清空所有子项的图形容器。

推荐阅读