Home/ Questions/Q 1051531
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T16:56:54+00:00

I am new to Javascript and I am working on an exercise I found

  • 0

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>
<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 &lt; 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 &lt; 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    1. 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 change total, so you should write

      total += parseFloat(options[i].value);

    2. 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 &lt; 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 &lt; optionslength; i++) {
        if (options[i].checked) {
            total += parseFloat(options[i].value);
        }            
    }
    return total; // <===== ALL CALCULATIONS ARE COMPLETED, SO WE CAN RETURN.
}

    3. 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 in getval(). Use the same method in getval2().

    4. When you get options[i].value you are getting a string. You should convert these to numbers before adding them to total. You only convert to numbers after the totals are returned, by then all sorts of funny concatenations have happened. Look at where I use parseFloat() in the snippets above and in the jsFiddle.

    • 0