Loop wont add up a running total of form values
I am new to Javascript and I am working on an exercise I found online. The problem is that the loop does not pick up the values from the form so the running count never gets updated. Any help is appreciated.
Actually one more question, do you have any idea why the values are not getting picked up from the checked input box? The functions are return zero even as I iterate through the loop.
<!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>
&l开发者_如何学JAVAt;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>
The code has multiple issues.
Here's a working jsFiddle example you can play with.
There's 4 big problems that stop your code from working:
In your if loops, when you want to add to the total you write:
options[i].value += total;This will act upon
options[i].value. You want to changetotal, so you should writetotal += parseFloat(options[i].value);In
getval()you return from inside the for loop like this: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!!!!!!!! } }You want total after all you calculations, so like this:
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. }Finally in
getval2(), you forgot to check whether the boxes are checked before adding them to the total. So you always get the same total. You check whether the boxes checked ingetval(). Use the same method ingetval2().When you get
options[i].valueyou are getting a string. You should convert these to numbers before adding them tototal. You only convert to numbers after the totals are returned, by then all sorts of funny concatenations have happened. Look at where I useparseFloat()in the snippets above and in the jsFiddle.
In this code, you never do anything with total, it's always 0.
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;
}
Also, one tip that might help you in debugging these types of things (and making your code better in general) is to try using indentation.
加载中,请稍侯......
精彩评论