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/。这适用于任意数量的方框组和每组中的任意数量的项目。

我的剧本有什么问题吗？

2 个答案: