如何在更改 HTML 表单输入后重新运行整个 js 脚本

问题描述 投票：0回答：1

我有一个非常基本的网络应用程序，但我遇到了困难。我写了一个 node.js 脚本来做一堆计算并吐出一堆数据，我决定我希望能够在浏览器中显示数据的图表（我选择使用

plotly.js
）。所以我对 .js 文件做了一些修改，并添加了一个 .html 文件（hancock.html），如下所示：

<head>
  <!-- Load hancock.js into the DOM -->
  <script type="module" src="./hancock.js"></script>
</head>

<body>
  <form action="hancock.html">
    <label for="weight">Weight:</label>
    <input
      type="number" id="weight" name="weight" value="175" min="1" max="10000" required
    />
    <label for="weight">lbs</label>
    <input type="submit" />
  </form>
  <div id="height"><!-- Height chart --></div>
  <div id="velocity"><!-- Velocity chart--></div>
  <div id="acceleration"><!-- Acceleration chart--></div>
  <script></script>
</body>

脚本看起来像这样：

import "./node_modules/lodash/lodash.js";
import "./node_modules/plotly.js-dist/plotly.js";

  let weight = document.getElementById("weight").value; // lbs
  // other constants here
  // some functions here

  let traceData = {
    height: [],
    velocity: [],
    acceleration: [],
    time: [],
  };

  while (position > 0) {
    // some calculations here
    traceData.height.push(height);
    traceData.velocity.push(velocity);
    traceData.acceleration.push(acceleration);
  }

  traceData.time = _.range(0, max_time, delta_t);

  var heightData = {
    x: traceData.time,
    y: traceData.height,
    type: "scatter",
  };

  var velocityData = {
    x: traceData.time,
    y: traceData.velocity,
    type: "scatter",
  };

  var accelerationData = {
    x: traceData.time,
    y: traceData.acceleration,
    type: "scatter",
  };

  var heightLayout = {
    // Layout stuff
  };

  var velocityLayout = {
    // Layout stuff
  };

  var accelerationLayout = {
    // Layout stuff
  };

  Plotly.newPlot("height", [heightData], heightLayout);
  Plotly.newPlot("velocity", [velocityData], velocityLayout);
  Plotly.newPlot("acceleration", [accelerationData], accelerationLayout);

  console.log("Operation takes ", max_time, "seconds");

这运行并生成了图表，但我希望能够控制代码的一些输入以运行并在用户更改这些输入时生成更新的图表。因此，我通过创建上面 .html 中显示的 

weight
从 
<input/>
开始，但是当我更改输入时，该值每次都会变回 175，并且会重现相同的图形（注意：我希望 175 成为默认值）。

阅读this answer后，我尝试将整个脚本（除了

import
语句）包装到一个名为
recalculate()
的函数中（然后我在hancock.js的底部调用它）然后将表单动作更改为
<form action="recalculate()">
，但这只是导致被重定向到一个页面说 Cannot GET /recalculate()（IntelliSense 似乎认为我应该在目录中给它一个文件）。 还尝试将操作更改为 
action="hancock.js"
，它只显示文件的文本。 我还将标题中的脚本类型更改为
type="text/javascript"
，并且图表根本没有加载。

我确定这很明显，但我对前端和 HTML 还很陌生，所以我确定这确实很愚蠢，但我已经为此苦苦挣扎了太久，以至于现在不只是问。任何能为我指明正确方向以学习如何做我想做的事情的资源都将不胜感激。

javascript html plotly
1个回答
0
投票

你应该添加一个 Event Listener 到你的表单提交事件：

<!-- 
Change the action to "#" to avoid reloading the page,
and add some id to identify your form:
 -->
<form action="#" id="myForm">
    <label for="weight">Weight:</label>
    <input
      type="number" id="weight" name="weight" value="175" min="1" max="10000" required
    />
    <label for="weight">lbs</label>
    <input type="submit" />
</form>

然后你的脚本应该是这样的：

const myFormSubmitHandler = (event) => {
  // do your calculations here

  event.preventDefault(); // important to avoid browser from reloading the page on submit
}

document.getElementById('myForm').addEventListener('submit', myFormSubmitHandler);
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.