javascript - 无法使 JavaScript 事件处理程序获取文本框文本属性

Question

我正在尝试计算文本框更改时的价格。在表格单元格内，我有六个文本框，每次文本框中的数字发生变化时，我都想重新计算总数。

<asp:TableCell VerticalAlign="Middle">
    Price: $12 non reflective, $24 Reflective 
    <br />
    <br />
    Quantity
    <asp:TextBox ID="TextBox2" BackColor="Blue"             runat="server" Width="40" Text="1" TextMode="Number"></asp:TextBox>
    <asp:TextBox BackColor="Red" ID="TextBox3" Text="0" runat="server" Width="40" TextMode="Number"></asp:TextBox>
    <asp:TextBox Text="0" ForeColor="White" BackColor="Black" ID="TextBox4" runat="server" Width="40" TextMode="Number"></asp:TextBox>
    <asp:TextBox Text="0" ID="TextBox5" runat="server" Width="40" TextMode="Number"></asp:TextBox>
    <asp:TextBox Text="0" ForeColor="White" BackColor="Red" ID="TextBox6" runat="server" Width="40" TextMode="Number"></asp:TextBox>
    <asp:TextBox Text="0" ID="TextBox7" runat="server" Width="40" TextMode="Number"></asp:TextBox>
    <br />
    <asp:Label ID="Label178" Width="80" Font-Size="Small" Font-Bold="true" runat="server" Text=" "></asp:Label>

    <asp:Label ID="Label179" Font-Size="X-Small" Font-Bold="true" runat="server" Text="Colors"></asp:Label>
    <asp:Label ID="Label180" runat="server" Width="140" Text=" "></asp:Label>
    <asp:Label ID="Label181" runat="server" Font-Size="X-Small" Text="Reflective"></asp:Label>
    <br />
    <br />
    Total: <u>$<asp:Label runat="server" ID="tp36" Text="12" Font-Bold="false"></asp:Label></u>

</asp:TableCell>

我想在不返回服务器并使用服务器端代码的情况下完成它。我想在客户端代码 (JavaScript) 上执行此操作。所以我在 .aspx 页面的末尾制作了一个脚本。

        <script src="Roadside.js" type="text/javascript"></script>
    </body>
</html>

Roadside.js:

var deal = document.getElementById("TextBox2");
var deal1 = document.getElementById("TextBox2");
var deal2 = document.getElementById("TextBox3");
var deal3 = document.getElementById("TextBox4");
var deal4 = document.getElementById("TextBox5");
var deal5 = document.getElementById("TextBox6");
var deal6 = document.getElementById("TextBox7");

deal.onchange = function() {
    var m1a = deal1.getAttribute("Text")
    var m2a = deal2.getAttribute("Text");
    var m3a = deal3.getAttribute("Text");
    var m4a = deal4.getAttribute("Text");
    var m5a = deal5.getAttribute("Text");
    var m6a = deal6.getAttribute("Text");

    var m1 = Number(m1a);
    var m2 = Number(m2a);
    var m3 = Number(m3a);
    var m4 = Number(m4a);
    var m5 = Number(m5a);
    var m6 = Number(m6a);

    var m1 = m1 * 12;
    var m2 = m2 * 12;
    var m3 = m3 * 12;
    var m4 = m4 * 12;
    var m5 = m5 * 24;
    var m6 = m6 * 24;

    var tt = m1 + m2 + m3 + m4 + m5 + m6; 

    document.getElementById("tp36").innerHTML = tt;

};

我使用的是 Visual Studio 2013，我是 JavaScript 的新手。我曾经用 C# 在服务器端计算它，但每次更改文本框时它都必须发回。

Answer 1

我认为在元素失去焦点之前，on-change 事件不会在文本区域触发。您可以尝试使用 on-keyup 事件。