如何将两个文本框相乘并使用JavaScript显示结果

本文关键字：结果 显示 JavaScript 文本 两个 | 更新日期: 2023-09-27 18:29:55

我正在开发一个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>

如何将两个文本框相乘并使用JavaScript显示结果

只需将.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>

您的错误出现在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

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

您还可以将事件添加到这些文本框中。这样，当点击函数时，你就不需要一个按钮来执行它，但每次添加新值时，你都可以得到一个结果。你可以尝试改变事件或类似的事情。

相关文章：