Is there something wrong in my script?

Question

I am new to client-side scripting. My problem is I've got a lot of textboxes and I want them to auto-calculate, but so far nothing works. Is there something wrong on my script?

function totaltraininghour()
{
var totalhour1=0;
var a1= parseInt(document.getElementById("a1").value);
var b1= parseInt(document.getElementById("b1").value);
var c1= parseInt(document.getElementById("c1").value);
var d1= parseInt(document.getElementById("d1").value);

var totalhour2=0;
var a2= parseInt(document.getElementById("a2").value);
var b2= parseInt(document.getElementById("b2").value);
var c2= parseInt(document.getElementById("c2").value);
var d2= parseInt(document.getElementById("d2").value);

var totalhour3=0;
var a3= parseInt(document.getElementById("a3").value);
var b3= parseInt(document.getElementById("b3").value);
var c3= parseInt(document.getElementById("c3").value);
var d3= parseInt(document.getElementById("d3").value);
var totaltraining=0;

if (a1 >=0)
{
totalhour1 = totalhour1 + a1
}
if (b1>=0)
{
totalhour1 = totalhour1+ b1
}
if (c1>=0)
{
totalhour1 = totalhour1+ c1
}
if (d1>=0)
{
totalhour1 = totalhour1+ d1
}
document.getElementById("txttotalhour1").value = totalhour1

if (a2 >=0)
{
totalhour2 = totalhour2 + a2
}
if (b2>=0)
{
totalhour2 = totalhour2+ b2
}
if (c2>=0)
{
totalhour2 = totalhour2+ c2
}
if (d2>=0)
{
totalhour2 = totalhour2+ d2
}
document.getElementById("txttotalhour2").value = totalhour2

if (a3 >=0)
{
totalhour3 = totalhour2 + a3
}
if (b3>=0) 
{
totalhour3 = totalhour2+ b3
 }
if (c3>=0)
{
totalhour3 = totalhour2+ c3
}
if (d3>=0)
{
totalhour3 = totalhour2+ d3
}
document.getElementById("txttotalhour3").value = totalhour3

totaltraining = totalhour1 + totalhour2 + totalhour3
document.getElementById("txttotaltraininghours").value = totaltraining
 </script>

<asp:TextBox ID="a2" runat="server" Width="100px" onkeyup="totaltraininghour
();"></asp:TextBox> And so on..

Answer 1

Make sure your IDs are what you think they are. If the controls are within a naming container, the IDs will be mangled. To get around it, have ASP.NET insert the ClientID , like this:

var a1= parseInt(document.getElementById("<%= a1.ClientID %>").value);

Note, unless you fiddle with your web server's settings, this will only work for scripts within .aspx files, not external .js files.

Answer 2

Here's a lot shorter way to do what you're trying to do without typing lots of duplicate code:

function calcSum(root, num, totalID) {
    var total = 0;
    for (var i = 1; i <= num; i++) {
        var val = document.getElementById(root + i).value || "0";
        total += parseInt(val, 10);
    }
    document.getElementById(totalID).value = total;
}

function calc() {
    calcSum("a", 4, "totalhour1");
    calcSum("b", 4, "totalhour2");
    calcSum("c", 4, "totalhour3");
}

You can see it working here with all the code visible: http://jsfiddle.net/jfriend00/CZPKM/ . I'd suggest you study how this works so you can vastly simplify your code.

In jQuery, you could do the whole thing like this:

$("#calc").click(function() {
    $(".group").each(function() {          // find each group and iterate through them
        var total = 0;
        $(".row", this).each(function() {
            total += parseInt(this.value || "0", 10);   // total all rows in the group
        });
        $(".total", this).val(total);      // store total
    });
});

This works with much simpler and more generic HTML you can see here in the working example: http://jsfiddle.net/jfriend00/fCLT7/ . This works for an arbitrary number of groups of boxes and an arbitrary number of items in each group.