如何用JavaScript实现ASP.NET文本框值自动求和？

你的代码思路正确，但存在变量名不匹配、事件绑定不规范等问题，同时可以优化交互体验，以下是修正后的完整实现方案：

修正后的JavaScript代码 #

<script type="text/javascript">
function sumCalc() {
    // 获取所有参与计算的文本框及结果框
    var txt1 = document.getElementById('<%= TextBox1.ClientID %>');
    var txt2 = document.getElementById('<%= TextBox2.ClientID %>');
    var txt3 = document.getElementById('<%= TextBox3.ClientID %>');
    var txt4 = document.getElementById('<%= TextBox4.ClientID %>');
    var txtTotal = document.getElementById('<%= TextBox5.ClientID %>');

    // 处理空值或非数字输入，默认转为0
    var val1 = txt1.value ? Number(txt1.value) : 0;
    var val2 = txt2.value ? Number(txt2.value) : 0;
    var val3 = txt3.value ? Number(txt3.value) : 0;
    var val4 = txt4.value ? Number(txt4.value) : 0;

    // 计算总和并赋值给结果框
    txtTotal.value = val1 + val2 + val3 + val4;
}
</script>

修正后的ASP.NET控件代码 #

<div>
    <asp:TextBox ID="TextBox1" runat="server" oninput="sumCalc();"></asp:TextBox>
</div>
<div>
    <asp:TextBox ID="TextBox2" runat="server" oninput="sumCalc();"></asp:TextBox>
</div>
<div>
    <asp:TextBox ID="TextBox3" runat="server" oninput="sumCalc();"></asp:TextBox>
</div>
<div>
    <asp:TextBox ID="TextBox4" runat="server" oninput="sumCalc();"></asp:TextBox>
</div>
<div> 
    Total:<asp:TextBox ID="TextBox5" runat="server" ReadOnly="true"></asp:TextBox>
</div>

关键优化点说明 #

• 变量名一致性：原代码中定义了_txt1却使用txt1，导致未定义错误，现已统一变量名。
• 实时触发求和：使用oninput事件替代onchange，用户输入过程中立即更新结果，无需等待文本框失去焦点。
• 输入容错处理：通过Number()转换输入值，空值或非数字内容会自动转为0，避免出现NaN的错误结果。
• 结果框只读：给总和文本框添加ReadOnly="true"属性，防止用户手动修改计算结果。

内容的提问来源于stack exchange，提问作者Sachin