How to multiply two Textbox and display result using JavaScript

Question

I am working on a asp.net Web Application. What I want to do in this program is there are three textboxes. When user enter the integer in TextBox1 and TextBox2, it will automatically display the multiplication result in TextBox3. I am not sure how should I do this, this is my code.

JavaScript Code

<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>

Answer 1

Just replace .ToString() for .value . .ToString() does not exist in javascript.

<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>

Answer 2

Your error is in your JavaScript code.

First, you need to select the two values with JavaScript which is done by .value

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

You also don't want to multiply strings. You don't need the .toString() methods.

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

Finally you want to change the value of the third textbox. Not the element itself.

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

I hope this helps you. Your error was that you selected the whole elements but not the values of them.

Also you can add an event to those textboxes. This way you won't need a button to execute the function when it is clicked but you will be able to get a result every time a new value is added. You may try on-change events or something like that.