时间戳

首页 > 解决方案 > HTML 和 Javascript 表单在提交时未计算

javascript - HTML 和 Javascript 表单在提交时未计算

问题描述

我是编码新手。我遇到了一个表单没有返回计算值的问题，我不确定我做错了什么。当我按下提交时，没有任何反应。我没有看到任何 linting 错误。chrome 上的开发工具中会弹出一个简短的红色，但时间不足以让我阅读错误。

HTML：

<body>

  <form id="load-calculator">
    <p>
      <label for="performer-mass">Please Enter Performer(s) Weight (lbs)</label>
      <input id="performer-mass" required name="performer-mass" type="number" min="1">
    </p>
    <p>
      <label for="apparatus-mass">Please Enter Apparatus Weight (lbs)</label>
      <input id="apparatus-mass" required name="apparatus-mass" type="number" min="1">
    </p>
    <p>
      <label for="dynamic-factor">Please Choose An Apparatus <br>(Dynamic Adjustment Factor)</label>
      <select id="dynamic-factor" required name="dynamic-factor">
        <option value="1.5">Aerial Yoga (1.5)</option>
        <option value="2">Silks (2 for drops less than 3ft.)</option>
        <option value="3">Static Trapeze (3)</option>
        <option value="3">silks (3 for drops 3-8ft.)</option>
        <option value="5">Rope (5)</option>
        <option value="5">Straps (5)</option>
      </select>
    </p>
    <p>
      <input type="submit" onClick="characteristicLoad" value="Calculate">
    </p>
    <p>
      <label for="result">Estimated Characteristic Load</label>
      <input for="load-calculator" id="result">
    </p>
  </form>

  <script type="module" src="src/loadCalculator.js"></script>

</body>

Javascript：

export function characteristicLoad() {
  const performerMass = document.getElementById('performer-mass').value;
  const apparatusMass = document.getElementById('apparatus-mass').value;
  const totalMass = performerMass + apparatusMass;

  const dynamicFactor = document.getElementById('dynamic-factor').value;

  let result = document.getElementById('result');

  let characteristicLoad = totalMass * dynamicFactor * 6;
  result.value = characteristicLoad;
}

这是 jsfiddle 的链接： https ://jsfiddle.net/dylancorvidae/ae289qum/1/

谢谢您的帮助。

标签： javascripthtmlformscalculated-field

解决方案

将您的输入类型从 更改submit为button以防止实际提交表单，并确保通过在函数名称后面添加括号来调用您的函数。

更正后的“计算”按钮如下所示：

<input type="button" onclick="characteristicLoad()" value="Calculate">

注意：如果您确实想在计算后提交表单，您可以保持输入类型为submit并绑定到onsubmit事件而不是onclick事件。

完整片段：

function characteristicLoad() {
  const performerMass = document.getElementById('performer-mass').value;
  const apparatusMass = document.getElementById('apparatus-mass').value;
  const totalMass = performerMass + apparatusMass;

  const dynamicFactor = document.getElementById('dynamic-factor').value;

  let result = document.getElementById('result');

  let characteristicLoad = totalMass * dynamicFactor * 6;
  result.value = characteristicLoad;
}
<form id="load-calculator">
  <p>
    <label for="performer-mass">Please Enter Performer(s) Weight (lbs)</label>
    <input id="performer-mass" required name="performer-mass" type="number" min="1">
  </p>
  <p>
    <label for="apparatus-mass">Please Enter Apparatus Weight (lbs)</label>
    <input id="apparatus-mass" required name="apparatus-mass" type="number" min="1">
  </p>
  <p>
    <label for="dynamic-factor">Please Choose An Apparatus <br>(Dynamic Adjustment Factor)</label>
    <select id="dynamic-factor" required name="dynamic-factor">
      <option value="1.5">Aerial Yoga (1.5)</option>
      <option value="2">Silks (2 for drops less than 3ft.)</option>
      <option value="3">Static Trapeze (3)</option>
      <option value="3">silks (3 for drops 3-8ft.)</option>
      <option value="5">Rope (5)</option>
      <option value="5">Straps (5)</option>
    </select>
  </p>
  <p>
    <input type="button" onClick="characteristicLoad()" value="Calculate">
  </p>
  <p>
    <label for="result">Estimated Characteristic Load</label>
    <input for="load-calculator" id="result">
  </p>
</form>

推荐阅读