提交表单时显示的数据会显示片刻，然后消失答案

【问题标题】：Data displayed upon submission of a form is visible for a moment and then disappears提交表单时显示的数据会显示片刻，然后消失
【发布时间】：2019-09-22 04:17:16
【问题描述】：

我正在尝试创建一个计算器（表单），允许用户提交一些数据，并在提交时使用 plotly.js 绘制图表。现在我只是想获得一个示例图（与数据无关）以在提交空表单时呈现。但是，图表会显示片刻，然后消失。似乎图表在页面刷新后半秒内可见，然后消失。我怎样才能防止这种情况发生？

<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

</head>
<body>
  <form>
    <button type="submit" onclick="calculate()">Calculate</button><br>
  </form>
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>

</body>

<script>
function calculate(){

  var data = [
    {
      x: ['giraffes', 'orangutans', 'monkeys'],
      y: [20, 14, 23],
      type: 'bar'
    }
  ];

  Plotly.newPlot('myDiv', data);


};
</script>
</html>

【问题讨论】：

标签： javascript plotly.js

【解决方案1】：

将按钮类型从“提交”更改为“按钮”

function calculate(){

  var data = [
    {
      x: ['giraffes', 'orangutans', 'monkeys'],
      y: [20, 14, 23],
      type: 'bar'
    }
  ];

  Plotly.newPlot('myDiv', data);


};

<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

</head>
<body>
  <form>
    <button type="button" onclick="calculate()">Calculate</button><br>
  </form>
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>

</body>

<script>

</script>
</html>