我是 Javascript 的新手,我正在做一个我在网上找到的练习。 问题是循环不会从表单中获取值,因此运行计数永远不会更新。感谢您的帮助。
实际上还有一个问题,您知道为什么没有从选中的输入框中提取值吗?即使我遍历循环,函数也会返回零。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<h1>Configure Your GT Super Sportscar</h1>
<form id="orderform" action="#">
<table border="1">
<tr>
<td><input type="radio" name="manual" checked="checked" id="manual" value="17790.00" />GT Manual</td><td>$17,790.00</td>
</tr>
<tr>
<td><input type="radio" name="manual" id="auto" value="18590.00" />GT Automatic</td><td>$18,590.00</td>
</tr>
<tr>
<td><input type="radio" name="manual" id="smanual" value="22455.00" />GT-S Manual</td><td>$22,455.00</td>
</tr>
<tr>
<td><input type="radio" name="manual" id="sshift" value="23155.00"/>GT-S Sportshift</td><td>$23,155.00</td>
</tr>
</table>
<table border="1">
<tr>
<td><input type="radio" name="manual" id="combo1" value="1235.00" />Option Combo #1</td><td>$1235.00</td>
</tr>
<tr>
<td><input type="radio" name="manual" id="combo2" value="3354.00" />Option Combo #2
<ul>
<li>Rear Spoiler and Fog Lamps</li>
<li>Keyless Entry</li>
<li>Power Tint and Side Moonroof</li>
<li>Power Windows, Doors, and Cruise Control</li>
</ul>
</td>
<td>$3354.00</td>
</tr>
<tr>
<td><input type="radio" name="manual" id="nocombo" value="0" />No Combo</td><td>$0</td>
</tr>
</table>
<table border="1">
<tr>
<td><input type="checkbox" name="amen" id="cac" value="550.00"/>CD Autochanger</td><td>$550.00</td>
</tr>
<tr>
<td><input type="checkbox" name="amen" id="vss" value="399.00"/>VIP Security System</td><td>$399.00</td>
</tr>
<tr>
<td><input type="checkbox" name="amen" id="adm" value="295.00"/>Auto Dimming Mirror</td><td>$295.00</td>
</tr>
</table>
<table border="1">
<tr>
<td><input type="text" name="price" id="price" /></td><td><input type="button" onclick="showit()" value="Calculate Total" /></td>
</tr>
</table>
</form>
<script type="text/javascript">
/**
* @author Isaac's
*/
function getval(){
var options = document.forms["orderform"].manual;
var optionslength = options.length;
var total = 0;
for (var i = 0; i < optionslength; i++) {
if (options[i].checked) {
options[i].value += total;
}
return total;
}
}
var result1 = getval();
function getval2(){
var total=0;
var checkboxes = document.forms["orderform"].amen;
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].value += total;
}
return total;
}
var result2 = getval2();
function showit(){
var total = parseFloat(result1) + parseFloat(result2)
alert(total);
}
</script>
</body>
</html>
最佳答案
代码有多个问题。
这是一个 working jsFiddle example你可以玩。
有 4 个大问题会阻止您的代码正常工作:
在你的 if 循环中,当你想添加到你写的总数时:
options[i].value += total;
这将作用于
options[i].value
。你想改变total
,所以你应该这样写total += parseFloat(options[i].value);
在
getval()
中,您从 inside for 循环返回,如下所示:function getval(){ var options = document.forms["orderform"].manual; var optionslength = options.length; var total = 0; for (var i = 0; i < optionslength; i++) { if (options[i].checked) { options[i].value += total; } return total; // <======= THIS IS STILL INSIDE THE FOR LOOP!!!!!!!! } }
你想要总计after你所有的计算,所以像这样:
function getval(){ var options = document.forms["orderform"].manual; var optionslength = options.length; var total = 0; for (var i = 0; i < optionslength; i++) { if (options[i].checked) { total += parseFloat(options[i].value); } } return total; // <===== ALL CALCULATIONS ARE COMPLETED, SO WE CAN RETURN. }
最后,在
getval2()
中,您忘记在将这些框添加到总数之前检查它们是否被选中。所以你总是得到相同的总数。您检查复选框是否在getval()
中选中。在getval2()
中使用相同的方法。当您获得
options[i].value
时,您将获得一个字符串。在将它们添加到total
之前,您应该将它们转换为数字。你只有在返回总数后才转换为数字,到那时已经发生了各种有趣的连接。看看我在上面的代码片段和 jsFiddle 中使用parseFloat()
的地方。
关于javascript - 循环不会累加表单值的总和,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3619782/