无答案的Javascript表单计算器
我对真正编写javascript(借用和编辑,不是很新)非常陌生。因此,在谷歌、代码大师和adobe cookbook的帮助下,我想出了这个简单的表单,可以嵌入到iPad出版物中(这只是我的测试,不是最终产品)。如果调试控制台和它似乎通过了W3C的合规性,那么到目前为止我还没有出现任何错误,但它也没有做任何事情!它不会生成答案???我希望有人能帮助我走出困境,或者引导我走上正确的方向。该页面的代码如下:提前感谢无答案的Javascript表单计算器,javascript,forms,calculator,Javascript,Forms,Calculator,我对真正编写javascript(借用和编辑,不是很新)非常陌生。因此,在谷歌、代码大师和adobe cookbook的帮助下,我想出了这个简单的表单,可以嵌入到iPad出版物中(这只是我的测试,不是最终产品)。如果调试控制台和它似乎通过了W3C的合规性,那么到目前为止我还没有出现任何错误,但它也没有做任何事情!它不会生成答案???我希望有人能帮助我走出困境,或者引导我走上正确的方向。该页面的代码如下:提前感谢 <body> <form id="form1" n
<body>
<form id="form1" name="form1" method="post" action="">
<table width="500" border="1">
<tr>
<th scope="col">Item</th>
<th scope="col">Cost 1</th>
<th scope="col">Cost 2</th>
</tr>
<tr>
<th scope="row">Manikin</th>
<td><input type="text" name="ManikinCost1" id="ManikinCost1" tabindex="1" /></td>
<td><input type="text" name="ManikinCost2" id="ManikinCost2" tabindex="2" /></td>
</tr>
<tr>
<th scope="row">Instructor</th>
<td><input type="text" name="InstructorCost1" id="InstructorCost1" tabindex="3" /></td>
<td><input type="text" name="InstructorCost2" id="InstructorCost2" tabindex="4" /></td>
</tr>
<tr>
<th scope="row">Books</th>
<td><input type="text" name="BooksCost1" id="BooksCost1" tabindex="5" /></td>
<td><input type="text" name="BooksCost2" id="BooksCost2" tabindex="6" /></td>
</tr>
<tr>
<th scope="row">Totals</th>
<td><input type="text" name="TotalsCost1" id="TotalsCost1" tabindex="7" /><span id="TotalsCost1"></span></td>
<td><input type="text" name="TotalsCost2" id="TotalsCost2" tabindex="8" /><span id="TotalsCost2"></span></td>
</tr>
<tr>
<th scope="row">Savings</th>
<td colspan="2"><input type="text" name="Savings" id="Savings" /><span id="Savings"></span></td>
</tr>
</table>
<p>
<input type="button" name="calculate" id="calculate" value="Calculate" />
</p>
<p> </p>
<p> </p>
</form>
<script type="text/javascript">
var btn = document.getElementById('calculate');
btn.onclick = function() {
//get the input values
var ManikinCost1 = parseInt(document.getElementById('ManikinCost1').value);
var ManikinCost2 = parseInt(document.getElementById('ManikinCost2').value);
var InstructorCost1 = parseInt(document.getElementById('InstructorCost1').value);
var InstructorCost2 = parseInt(document.getElementById('InstructorCost2').value);
var BooksCost1 = parseInt(document.getElementById('BooksCost1').value);
var BooksCost2 = parseInt(document.getElementById('BooksCost2').value);
// get the elements to hold the results
var TotalsCost1 = document.getElementById('TotalsCost1');
var TotalsCost2 = document.getElementById('TotalsCost2');
var Savings = document.getElementById('Savings');
// create an empty array to hold error messages
var msg = [];
// check each input value, and add an error message to the array if it's not a number
if (isNaN(ManikinCost2)) {
msg.push('Manikin Cost 2 is not a number');
// the value isn't a number
}
if (isNaN(InstructorCost1)) {
msg.push('Instructor Cost 1 is not a number');
// the value isn't a number
}
if (isNaN(InstructorCost2)) {
msg.push('Instructor Cost 2 is not a number');
// the value isn't a number
}
if (isNaN(BooksCost1)) {
msg.push('Book Cost 1 is not a number');
// the value isn't a number
}
if (isNaN(ManikinCost1)) {
msg.push('Manikin Cost 1 is not a number');
// the value isn't a number
}
if (isNaN(BooksCost2)) {
msg.push('Book Cost 2 is not a number');
// the value isn't a number
}
// if the array contains any values, display an error message
if (msg.length > 0) {
TotalsCost1.innerHTML = msg.join(', ');
} else {
TotalsCost1.innerHTML = + (ManikinCost1 + InstructorCost1 + BooksCost1);
TotalsCost2.innerHTML = + (ManikinCost2 + InstructorCost2 + BooksCost2);
Savings.innerHTML = + (TotalsCost1 - TotalsCost2);
}
};
</script>
</body>
项目
成本1
成本2
人体模型
教练
书
总数
储蓄
var btn=document.getElementById('calculate');
btn.onclick=函数(){
//获取输入值
var ManikinCost1=parseInt(document.getElementById('ManikinCost1').value);
var ManikinCost2=parseInt(document.getElementById('ManikinCost2').value);
var InstructorCost1=parseInt(document.getElementById('InstructorCost1').value);
var InstructorCost2=parseInt(document.getElementById('InstructorCost2').value);
var BooksCost1=parseInt(document.getElementById('BooksCost1').value);
var BooksCost2=parseInt(document.getElementById('BooksCost2').value);
//获取元素以保存结果
var TotalsCost1=document.getElementById('TotalsCost1');
var TotalsCost2=document.getElementById('TotalsCost2');
var Savings=document.getElementById('Savings');
//创建一个空数组来保存错误消息
var msg=[];
//检查每个输入值,如果不是数字,则向数组中添加一条错误消息
if(伊斯南(马尼金成本2)){
msg.push(“人体模型成本2不是一个数字”);
//该值不是一个数字
}
如果(isNaN(讲师成本1)){
msg.push(“讲师成本1不是一个数字”);
//该值不是一个数字
}
如果(isNaN(讲师成本2)){
msg.push(“讲师成本2不是一个数字”);
//该值不是一个数字
}
如果(伊斯南(成本1)){
msg.push('Book Cost 1不是一个数字');
//该值不是一个数字
}
如果(isNaN(ManikinCost1)){
msg.push(“人体模型成本1不是一个数字”);
//该值不是一个数字
}
if(伊斯南(图书成本2)){
msg.push('图书成本2不是一个数字');
//该值不是一个数字
}
//如果数组包含任何值,则显示错误消息
如果(msg.length>0){
TotalsCost1.innerHTML=msg.join(',');
}否则{
TotalsCost1.innerHTML=+(ManikinCost1+InstructorCost1+BookCost1);
TotalsCost2.innerHTML=+(ManikinCost2+InstructorCost2+BooksCost2);
Savings.innerHTML=+(TotalsCost1-TotalsCost2);
}
};
您需要将
onclick
事件放入自调用代码或所谓的闭包中。移动整个btn。在这段代码中单击函数:(…)()
,以使其工作。很好的尝试,一些小错误,但非常接近
我做了一些改变
如注释中所述,我用括号(function(){…})包装了函数
在更新文本输入时,我还将innerHTML更改为value,您的储蓄计算应该是input.value,我已经为您更新了它
让我知道你进展如何
<body>
<form id="form1" name="form1" method="post" action="">
<table width="500" border="1">
<tr>
<th scope="col">Item</th>
<th scope="col">Cost 1</th>
<th scope="col">Cost 2</th>
</tr>
<tr>
<th scope="row">Manikin</th>
<td><input type="text" name="ManikinCost1" id="ManikinCost1" tabindex="1" /></td>
<td><input type="text" name="ManikinCost2" id="ManikinCost2" tabindex="2" /></td>
</tr>
<tr>
<th scope="row">Instructor</th>
<td><input type="text" name="InstructorCost1" id="InstructorCost1" tabindex="3" /></td>
<td><input type="text" name="InstructorCost2" id="InstructorCost2" tabindex="4" /></td>
</tr>
<tr>
<th scope="row">Books</th>
<td><input type="text" name="BooksCost1" id="BooksCost1" tabindex="5" /></td>
<td><input type="text" name="BooksCost2" id="BooksCost2" tabindex="6" /></td>
</tr>
<tr>
<th scope="row">Totals</th>
<td><input type="text" name="TotalsCost1" id="TotalsCost1" tabindex="7" /><span id="TotalsCost1"></span></td>
<td><input type="text" name="TotalsCost2" id="TotalsCost2" tabindex="8" /><span id="TotalsCost2"></span></td>
</tr>
<tr>
<th scope="row">Savings</th>
<td colspan="2"><input type="text" name="Savings" id="Savings" /><span id="Savings"></span></td>
</tr>
</table>
<p>
<input type="button" name="calculate" id="calculate" value="Calculate" />
</p>
<p> </p>
<p> </p>
</form>
<script type="text/javascript">
var btn = document.getElementById('calculate');
btn.onclick = (function() {
//get the input values
var ManikinCost1 = parseInt(document.getElementById('ManikinCost1').value);
var ManikinCost2 = parseInt(document.getElementById('ManikinCost2').value);
var InstructorCost1 = parseInt(document.getElementById('InstructorCost1').value);
var InstructorCost2 = parseInt(document.getElementById('InstructorCost2').value);
var BooksCost1 = parseInt(document.getElementById('BooksCost1').value);
var BooksCost2 = parseInt(document.getElementById('BooksCost2').value);
// get the elements to hold the results
var TotalsCost1 = document.getElementById('TotalsCost1');
var TotalsCost2 = document.getElementById('TotalsCost2');
var Savings = document.getElementById('Savings');
// create an empty array to hold error messages
var msg = [];
// check each input value, and add an error message to the array if it's not a number
if (isNaN(ManikinCost2)) {
msg.push('Manikin Cost 2 is not a number');
// the value isn't a number
}
if (isNaN(InstructorCost1)) {
msg.push('Instructor Cost 1 is not a number');
// the value isn't a number
}
if (isNaN(InstructorCost2)) {
msg.push('Instructor Cost 2 is not a number');
// the value isn't a number
}
if (isNaN(BooksCost1)) {
msg.push('Book Cost 1 is not a number');
// the value isn't a number
}
if (isNaN(ManikinCost1)) {
msg.push('Manikin Cost 1 is not a number');
// the value isn't a number
}
if (isNaN(BooksCost2)) {
msg.push('Book Cost 2 is not a number');
// the value isn't a number
}
// if the array contains any values, display an error message
if (msg.length > 0) {
TotalsCost1.innerHTML = msg.join(', ');
} else {
TotalsCost1.value = + (ManikinCost1 + InstructorCost1 + BooksCost1);
TotalsCost2.value = + (ManikinCost2 + InstructorCost2 + BooksCost2);
Savings.value = + (TotalsCost1.value - TotalsCost2.value);
}
});
</script>
</body>
项目
成本1
成本2
人体模型
教练
书
总数
储蓄
var btn=document.getElementById('calculate');
btn.onclick=(函数(){
//获取输入值
var ManikinCost1=parseInt(document.getElementById('ManikinCost1').value);
var ManikinCost2=parseInt(document.getElementById('ManikinCost2').value);
var InstructorCost1=parseInt(document.getElementById('InstructorCost1').value);
var InstructorCost2=parseInt(document.getElementById('InstructorCost2').value);
var BooksCost1=parseInt(document.getElementById('BooksCost1').value);
var BooksCost2=parseInt(document.getElementById('BooksCost2').value);
//获取元素以保存结果
var TotalsCost1=document.getElementById('TotalsCost1');
var TotalsCost2=document.getElementById('TotalsCost2');
var Savings=document.getElementById('Savings');
//创建一个空数组来保存错误消息
var msg=[];
//检查每个输入值,如果不是数字,则向数组中添加一条错误消息
if(伊斯南(马尼金成本2)){
msg.push(“人体模型成本2不是一个数字”);
//该值不是一个数字
}
如果(isNaN(讲师成本1)){
msg.push(“讲师成本1不是一个数字”);
//该值不是一个数字
}
如果(isNaN(讲师成本2)){
msg.push(“讲师成本2不是一个数字”);
//该值不是一个数字
}
如果(伊斯南(成本1)){
msg.push('Book Cost 1不是一个数字');
//该值不是一个数字
}
如果(isNaN(ManikinCost1)){
msg.push(“人体模型成本1不是一个数字”);
//该值不是一个数字
}
if(伊斯南(图书成本2)){
msg.push('图书成本2不是一个数字');
//该值不是一个数字
}
//如果数组包含任何值,则显示错误消息
如果(msg.length>0){
TotalsCost1.innerHTML=msg.join(',');
}否则{
TotalsCost1.value=+(ManikinCost1+InstructorCost1+BooksCost1);
TotalsCost2.value=+(ManikinCost2+讲师cost2+图书成本2);
Savings.value=+(TotalsCost1.value-TotalsCost2.value);
}
});
<body>
<form id="form1" name="form1" method="post" action="">
<table width="500" border="1">
<tr>
<th scope="col">Item</th>
<th scope="col">Cost 1</th>
<th scope="col">Cost 2</th>
</tr>
<tr>
<th scope="row">Manikin</th>
<td><input type="text" name="ManikinCost1" id="ManikinCost1" tabindex="1" /></td>
<td><input type="text" name="ManikinCost2" id="ManikinCost2" tabindex="2" /></td>
</tr>
<tr>
<th scope="row">Instructor</th>
<td><input type="text" name="InstructorCost1" id="InstructorCost1" tabindex="3" /></td>
<td><input type="text" name="InstructorCost2" id="InstructorCost2" tabindex="4" /></td>
</tr>
<tr>
<th scope="row">Books</th>
<td><input type="text" name="BooksCost1" id="BooksCost1" tabindex="5" /></td>
<td><input type="text" name="BooksCost2" id="BooksCost2" tabindex="6" /></td>
</tr>
<tr>
<th scope="row">Totals</th>
<td><input type="text" name="TotalsCost1" id="TotalsCost1" tabindex="7" /><span id="TotalsCost1"></span></td>
<td><input type="text" name="TotalsCost2" id="TotalsCost2" tabindex="8" /><span id="TotalsCost2"></span></td>
</tr>
<tr>
<th scope="row">Savings</th>
<td colspan="2"><input type="text" name="Savings" id="Savings" /><span id="Savings"></span></td>
</tr>
</table>
<p>
<input type="button" name="calculate" id="calculate" value="Calculate" />
</p>
<p> </p>
<p> </p>
</form>
<script type="text/javascript">
var btn = document.getElementById('calculate');
btn.onclick = (function() {
//get the input values
var ManikinCost1 = parseInt(document.getElementById('ManikinCost1').value);
var ManikinCost2 = parseInt(document.getElementById('ManikinCost2').value);
var InstructorCost1 = parseInt(document.getElementById('InstructorCost1').value);
var InstructorCost2 = parseInt(document.getElementById('InstructorCost2').value);
var BooksCost1 = parseInt(document.getElementById('BooksCost1').value);
var BooksCost2 = parseInt(document.getElementById('BooksCost2').value);
// get the elements to hold the results
var TotalsCost1 = document.getElementById('TotalsCost1');
var TotalsCost2 = document.getElementById('TotalsCost2');
var Savings = document.getElementById('Savings');
// create an empty array to hold error messages
var msg = [];
// check each input value, and add an error message to the array if it's not a number
if (isNaN(ManikinCost2)) {
msg.push('Manikin Cost 2 is not a number');
// the value isn't a number
}
if (isNaN(InstructorCost1)) {
msg.push('Instructor Cost 1 is not a number');
// the value isn't a number
}
if (isNaN(InstructorCost2)) {
msg.push('Instructor Cost 2 is not a number');
// the value isn't a number
}
if (isNaN(BooksCost1)) {
msg.push('Book Cost 1 is not a number');
// the value isn't a number
}
if (isNaN(ManikinCost1)) {
msg.push('Manikin Cost 1 is not a number');
// the value isn't a number
}
if (isNaN(BooksCost2)) {
msg.push('Book Cost 2 is not a number');
// the value isn't a number
}
// if the array contains any values, display an error message
if (msg.length > 0) {
TotalsCost1.innerHTML = msg.join(', ');
} else {
TotalsCost1.value = + (ManikinCost1 + InstructorCost1 + BooksCost1);
TotalsCost2.value = + (ManikinCost2 + InstructorCost2 + BooksCost2);
Savings.value = + (TotalsCost1.value - TotalsCost2.value);
}
});
</script>
</body>