スクリプトに何か問題がありますか？

Question

私はクライアント側のスクリプティングが初めてです。私の問題は、テキストボックスがたくさんあり、それらを自動計算したいのですが、これまでのところ何もできません。スクリプトに何か問題がありますか？

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

は、あなたのIDを使用すると、彼らが何を考えていることを確認してください。コントロールが命名コンテナ内にある場合、IDはマングリングされます。 ASP.NETはこのように、ClientIDを挿入している、それを回避するには：

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

注意を、あなたのWebサーバの設定をいじるない限り、これが唯一の.aspxファイル、外部ないの.jsファイル内のスクリプトのために動作します。

Answer 2

ここでは、重複したコードの多くを入力せずに何をしようとしてやるべきことがたくさん短い方法です：

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"); 
} 

あなたはそれが目に見えるすべてのコードをここで働く見ることができます：http://jsfiddle.net/jfriend00/CZPKM/。私はあなたがあなたのコードを大幅に簡素化できるようにこれがどのように動作するかを学ぶことをお勧めします。

jQueryのでは、このように全体のことを行うことができ：これは動作します

$("#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 
    }); 
}); 

を使用すると、作業の例では、ここで見ることができる非常に簡単でより一般的なHTMLで：http://jsfiddle.net/jfriend00/fCLT7/。これは、任意の数のボックスのグループと、各グループ内の任意の数のアイテムに対して機能します。