这个问题看起来不需要太多解释,但我觉得我需要第二个人来检查一下,因为我真的无法理解为什么它不能工作!尝试使用“能量计算器”,当提交时没有返回值,虽然我以与“电池充电计算器”相同的方式处理它,但后者确实可以正常工作。
这个问题看起来不需要太多解释,但我觉得我需要第二个人来检查一下,因为我真的无法理解为什么它不能工作!尝试使用“能量计算器”,当提交时没有返回值,虽然我以与“电池充电计算器”相同的方式处理它,但后者确实可以正常工作。
onLoad
选项,该选项将JavaScript代码放置在匿名函数中:window.onload = function() {
function energyCalc() {
var mass = document.forms['0'].mass.value;
var finalMass = mass * 1000;
var velocity = document.forms['0'].velocity.value;
var finalVelocity = velocity * 0.3048;
var energy = (0.5 * (finalMass * (finalVelocity * finalVelocity)));
if ((mass && velocity) != '') {
document.getElementById("energy").innerHTML = 'Energy of weapon: ' + energy + ' Joules';
} else {
document.getElementById("energy").innerHTML = 'You must enter values in both fields!';
}
}
}
no wrap (head)
和No library
。attachEvent
(对于IE <9)或addEventListener
(对于真正的浏览器)。
编辑关于OP编辑
打开控制台,尝试使用能源计算器后,问题立即变得明显:
> Uncaught TypeError: Cannot read property 'value' of undefined (fiddle.jshell.net:100)
这是这一行:
var mass = document.forms['0'].mass.value;
您正在访问错误的表单。在能量计算器的代码中,您需要将forms['0']
的所有情况更改为forms[1]
。顺便注意省略的引号 - document.forms
是一个数组,而不是对象!
此外,您显然在使用jQuery,但没有充分利用它。为什么不呢?您的代码有很大的改进空间。现在是清理时间!
<div id="main">
<a href="#"><h3>Battery Charge Calculator</h3></a>
<div class="slide">
<form id="batteryForm" action="">
<p>
Battery Capacity (mah):
</p>
<p>
<input name="capacity"/>
</p>
<p>
Charge Rate (mA):
</p>
<p>
<input name="rate"/>
</p>
<p>
<input type="submit" value="Submit"/>
</p>
<br/>
<p id="time"/>
</form>
</div>
<a href="#"><h3>Energy Calculator</h3></a>
<div class="slide">
<form id="energyForm" action="">
<p>
Mass of BB (grammes):
</p>
<p>
<input name="mass"/>
</p>
<p>
Power of weapon (FPS):
</p>
<p>
<input name="velocity"/>
</p>
<p>
<input type="submit" value="Submit"/>
</p>
<br/>
<p id="energy"/>
</form>
</div>
</div>
$(function() {
$('#main > a > h3').click(function() {
$(this).closest('a').next('div.slide').animate({
height: 'toggle'
}, 750);
});
function batteryCalc() {
var capacity = this.capacity.value,
rate = this.rate.value,
time = capacity / (rate / 1.2),
chargeTime = (Math.round(10 * time) / 10).toFixed(1),
message = 'You must enter values in both fields!';
if (capacity && rate) {
message = 'Required time on charge: ' + chargeTime + ' hours';
}
$('#time').html(message);
return false;
}
function energyCalc() {
var mass = this.mass.value,
finalMass = mass * 1000,
velocity = this.velocity.value,
finalVelocity = velocity * 0.3048,
energy = (0.5 * (finalMass * (finalVelocity * finalVelocity))).toFixed(1),
message = 'You must enter values in both fields!';
if (mass && velocity) {
message = 'Energy of weapon: ' + energy + ' Joules';
}
$('#energy').html(message);
return false;
}
$('#batteryForm').submit(batteryCalc);
$('#energyForm').submit(energyCalc);
});
看到左侧的下拉列表,上面写着“onLoad”吗?把它改成“no wrap (head)”就可以了。
window.energyCalc = function() { ... }
移除 action = "javascript:energyCalc()"
并添加:
jQuery(document).ready(function()
{
jQuery(document.forms[0]).submit(energyCalc);
});
没有使用jQuery
<form method="post" onsubmit="energyCalc();" >
编辑
还需要返回值(true或false)
请查看:http://jsfiddle.net/SabAH/7/ http://jsfiddle.net/SabAH/11/
更新一个解释:
action
属性告诉浏览器要提交到哪里。函数需要在onsubmit
上运行。
更新2查看新的jsfiddle后
有一些错误。首先,您的action="javascript:..."
需要改为onsubmit="javascript: return ..."
并删除提交按钮的onclick事件,能量方法需要引用forms[1]
而不是forms[0]
,因为它是第二个表单。主要就是这些。