For循环未重置条形图数据

Question

我一直试图在JavaScript条形图中获得一个for循环，以在单击按钮但不起作用时将条高重置为0。我尝试登录Google Developer工具的控制台，但未显示任何错误。该功能称为“重置”。也许我需要另一双眼睛看一下，看看我可能会缺少什么。任何帮助表示赞赏。

function createBarChart(data) {
  // Start with the container.
  var chart = document.createElement("div");

  // The container must have position: relative.
  chart.style.position = "relative";

  // The chart's height is the value of its largest
  // data item plus a little margin.
  var height = 0;
  for (var i = 0; i < data.length; i += 1) {
    height = Math.max(height, data[i].value);
  }
  chart.style.height = (height + 10) + "px";

  // Give the chart a bottom border.
  chart.style.borderBottomStyle = "solid";
  chart.style.borderBottomWidth = "1px";

  // Iterate through the data.
  var barPosition = 0;

  // We have a preset bar width for the purposes of this
  // example.  A full-blown chart module would make this
  // customizable.
  var barWidth = 48.30;
  for (i = 0; i < data.length; i += 1) {
    // Basic column setup.
    var dataItem = data[i];
    var bar = document.createElement("div");
    bar.style.className = "bars";
    bar.style.position = "absolute";
    bar.style.left = barPosition + "px";
    bar.style.width = barWidth + "px";
    bar.style.backgroundColor = dataItem.color;
    bar.style.height = dataItem.value + "px";
    bar.style.borderStyle = "ridge";
    bar.style.borderColor = dataItem.color;

    // Visual flair with CSS Level 3 (for maximum compatibility
    // we set multiple possible properties to the same value).
    // Hardcoded values here just for illustration; a
    // full module would allow major customizability.
    bar.style.MozBoxShadow = "rgba(128, 128, 128, 0.75) 0px 7px 12px";
    bar.style.WebkitBoxShadow = "rgba(128, 128, 128, 0.75) 0px 7px 12px";
    bar.style.boxShadow = "rgba(128, 128, 128, 0.75) 0px 7px 12px";
    bar.style.MozBorderRadiusTopleft = "8px";
    bar.style.WebkitBorderTopLeftRadius = "8px";
    bar.style.borderTopLeftRadius = "8px";
    bar.style.MozBorderRadiusTopright = "8px";
    bar.style.WebkitBorderTopRightRadius = "8px";
    bar.style.borderTopRightRadius = "8px";
    bar.style.backgroundImage =
      "-moz-linear-gradient(" + dataItem.color + ", black)";
    bar.style.backgroundImage =
      "-webkit-gradient(linear, 0% 0%, 0% 100%," +
      "color-stop(0, " + dataItem.color + "), color-stop(1, black))";
    bar.style.backgroundImage =
      "linear-gradient(" + dataItem.color + ", black)";

    // Recall that positioning properties are treated *relative*
    // to the corresponding sides of the containing element.
    bar.style.bottom = "-1px";
    chart.appendChild(bar);

    // Move to the next bar.  We provide an entire bar's
    // width as space between columns.
    barPosition += (barWidth * 2);
  }

  return chart;
};

function reset() {
  'use strict';
  var bars = document.getElementsByClassName("bars");
  for (var i = 0; i < bars.length; i++) {
    bars[i].style.height = "Opx";
  }
}

window.onload = function() {
  var colors = [{
      color: "red",
      value: 40
    },
    {
      color: "blue",
      value: 10
    },
    {
      color: "green",
      value: 100
    },
    {
      color: "black",
      value: 65
    },
    {
      color: "yellow",
      value: 75
    },
    {
      color: "purple",
      value: 120
    },
    {
      color: "grey",
      value: 121
    },
    {
      color: "orange",
      value: 175
    },
    {
      color: "olive",
      value: 220
    },
    {
      color: "maroon",
      value: 275
    },
    {
      color: "brown",
      value: 300
    },
    {
      color: "teal",
      value: 15
    }
  ];

  var chart = createBarChart(colors);
  document.querySelector("#wrapper").appendChild(chart); // keeps chart inside wrapper div
};

<div id="wrapper"></div>
<button onclick="reset()">Reset</button>

Answer 1

您有错字。您键入字母 O ，而不是数字 0