提交時不計算 HTML 和 Javascript 表單

Question

我是編碼新手。 我的表單未返回計算值時遇到問題，我不確定我做錯了什么。 當我按下提交時，什么也沒有發生。 我沒有看到任何 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/

謝謝您的幫助。

Answer 1

將您的輸入類型從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>

Answer 2

您的代碼在按鈕的onclick事件中出錯。

您必須像這樣在函數名稱后使用() ： onClick="characteristicLoad()"

提交時不計算 HTML 和 Javascript 表單

問題描述

2 個解決方案

解決方案1
3 2020-02-21 20:21:05

解決方案2
2 2020-02-21 20:25:10

提交時不計算 HTML 和 Javascript 表單

問題描述

2 個解決方案

解決方案1 3 2020-02-21 20:21:05

解決方案2 2 2020-02-21 20:25:10

解決方案1
3 2020-02-21 20:21:05

解決方案2
2 2020-02-21 20:25:10