我是编码新手。我在使用未返回计算值的表单时遇到问题，我不确定自己做错了什么。当我按下提交时，什么也没有发生。我没有看到任何 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/
感谢您的帮助。
最佳答案
将您的输入类型从 submit 更改为 button 以防止实际提交表单，并确保通过在函数名称后面添加括号来调用您的函数。
更正后的“计算”按钮如下所示:
<input type="button" onclick="characteristicLoad()" value="Calculate">
注意:如果您确实确实想在计算后提交表单，您可以将输入类型保持为提交并绑定(bind)到 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>关于javascript - 提交时不计算 HTML 和 Javascript 表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60345656/