修改HTML表单输入后如何重新运行完整JS脚本？

1. 先搞定表单提交的核心问题 #

表单默认会发起页面刷新请求，这就是你修改值提交后恢复默认、图表不更新的根本原因。必须阻止这个默认行为，用JS自己处理输入和计算。

2. 正确的代码实现方式 #

HTML部分 #

<form id="weightForm">
  <label for="weight">Weight:</label>
  <input type="number" id="weight" value="175">
  <button type="submit">更新计算</button>
</form>
<div id="chart"></div>

JavaScript部分（注意保持type="module"，因为你用了import） #

import Plotly from 'https://cdn.plot.ly/plotly-2.27.0.min.js';

// 初始化默认权重
let currentWeight = 175;

// 替换成你的计算逻辑（注意：浏览器里不能用Node.js专属API，比如fs、http这些，要改成纯前端可运行的代码）
function calculateData(weight) {
  // 这里写你的计算逻辑，返回图表需要的数据格式
  return {
    x: [1, 2, 3, 4],
    y: [weight * 0.5, weight * 0.8, weight * 1.2, weight * 1.5],
    type: 'scatter'
  };
}

// 渲染/更新图表
function renderChart(data) {
  Plotly.newPlot('chart', [data]);
}

// 重新计算并更新图表的函数
function recalculate() {
  // 获取输入框的新值并转成数字
  const newWeight = Number(document.getElementById('weight').value);
  currentWeight = newWeight;
  // 生成新数据并更新图表
  const newData = calculateData(currentWeight);
  renderChart(newData);
}

// 给表单绑定提交事件，阻止默认行为并调用计算函数
document.getElementById('weightForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 关键：阻止页面刷新
  recalculate();
});

// 页面加载时先渲染默认图表
renderChart(calculateData(currentWeight));

3. 你之前踩的坑说明 #

• 把表单action设为函数名：表单action只能填URL，不能直接写函数，所以会跳转到错误页面，正确做法是用事件监听处理提交。
• action设为hancock.js：浏览器会直接请求这个JS文件，所以显示脚本内容，这不是前端处理表单的方式。
• 改script类型为text/javascript：你的代码用了import，必须用type="module"，否则浏览器不识别ES模块语法，导致Plotly加载失败。

• 基础DOM与事件：重点练表单处理、事件默认行为阻止、DOM元素的获取/修改，这是前端交互的核心。
• Plotly.js基础：直接啃官方示例，跟着改数据和参数，搞懂图表需要的数据格式要求。
• 前后端边界：明确Node.js是服务端环境，前端JS不能用Node专属API，原来的计算逻辑如果依赖Node功能，要改成纯前端代码。
• 前端交互逻辑：学习无刷新更新页面内容的思路，比如用事件监听、动态修改DOM/图表。

内容的提问来源于stack exchange，提问作者eric_b_231