如何使用JavaScript将两个Textbox相乘并显示结果

时间:2016-01-12 15:38:13

标签: javascript c# asp.net

我正在开发一个asp.net Web应用程序。我想在这个程序中做的是有三个文本框。当用户在TextBox1和TextBox2中输入整数时,它将自动在TextBox3中显示乘法结果。我不知道该怎么做,这是我的代码。

JavaScript代码

<script type="text/javascript">
        function multiply() {
            var txt1 = document.getElementById('<%= TextBox1.ClientID %>')
            var txt2 = document.getElementById('<%= TextBox2.ClientID %>')
            var result = txt1.ToString() * txt2.ToString();

            var rstTxtbox = document.getElementById('<%= TextBox3.ClientID %>')


            rstTxtbox = result.toString();
        }
    </script>

HTML:

   <div>
        <table>
            <tr>
                <td>
                     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </td>
                <td style="text-align:center">
                    x
                </td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                </td>
            </tr>

            <tr>
                <td colspan="2">
                    <asp:Label ID="Label1" runat="server" Text="Result =  "></asp:Label>
                </td>
                <td>
                   <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                </td>
            </tr>
        </table>

        </div>

2 个答案:

答案 0 :(得分:2)

只需将.ToString()替换为.value即可。 javascript中不存在.ToString()

<script type="text/javascript">
        function multiply() {
            var txt1 = document.getElementById('<%= TextBox1.ClientID %>');
            var txt2 = document.getElementById('<%= TextBox2.ClientID %>');
            var result = txt1.value * txt2.value; //Here changes!

            var rstTxtbox = document.getElementById('<%= TextBox3.ClientID %>');


            rstTxtbox.value = result; //And here!!
        }
    </script>

答案 1 :(得分:1)

您的错误在JavaScript代码中。

首先,您需要使用JavaScript选择两个值,这些值由.value

完成
document.getElementById('<%= TextBox1.ClientID %>').value;

你也不想增加字符串。你不需要.toString()方法。

var result = txt1 * txt2; //In this case txt is not a good name for the variable

最后,您要更改第三个文本框的值。不是元素本身。

var rstTxtbox = document.getElementById('<%= TextBox3.ClientID %>')
rstTxtbox.value = result; 
//I haven't tested this code. If this doesn't work you can try rstTxtbox.innerHTML

我希望这会对你有所帮助。 您的错误是您选择了整个元素,但没有选择它们的值。

您还可以向这些文本框添加事件。这样,您在单击时不需要按钮来执行该功能,但每次添加新值时您都可以获得结果。您可以尝试改变事件或类似事件。