Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    6
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Question Learning Javascript - using an array to append results?

    I am learning HTML/Javascript and I have created a simple form where 2 boxes are added together using a button as below:

    <html>
    <head>
    <title>Adding Numbers Together</title>

    <SCRIPT language = JavaScript>

    function calculate() {
    A = document.frmOne.txtFirstNumber.value
    B = document.frmOne.txtSecondNumber.value

    A = Number(A)
    B = Number(B)

    C = (A + B)
    document.frmOne.txtThirdNumber.value = C
    }

    </SCRIPT>

    <FORM NAME = frmOne>

    <table border="1" >

    <tr>

    <th> Number One:</th>
    <th> Number Two:</th>
    </tr>
    <tr>
    <td> <Input Type="Text" Name="txtFirstNumber" Size="5" value=""> </td>
    <td> <Input Type="Text" Name="txtSecondNumber" Size="5" value=""> </td>
    </tr>
    <tr>
    <td colspan="2"> Total: <Input Type="Text" Name="txtThirdNumber" Size="15" value = ""> </td>
    </tr>
    <tr>
    <td colspan="2"> <Input Type="Button" Name="b1" Value="Add Numbers" onClick = calculate()> </td>

    </FORM>
    </html>

    How do I use an array within this to append the results each time the button is clicked and ends up with a long list of numbers?

    I am very new to all this so please be gentle :-)

    Thanks
    MJ

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,719
    Thanks
    25
    Thanked 662 Times in 661 Posts
    Welcome to the forums Mokeyjen.
    If you click the "Go Advanced" button at the bottom of the Quick Reply box You'll go to a page with a number sign (#) in the tool icons. This will give you the code tags you need to put your code on the page in a manner we can easily use.

    Not sure why you want an array or how you want to use it. See the code I added - is that what you want, only with an array?
    Code:
    <!doctype html>
    <html>
    <head>
    <title>Adding Numbers Together</title>
    </head>
    
    <body>
    <form NAME = frmOne>
    <table border="1" >
    	<tr>
    	<th> Number One:</th>
    	<th> Number Two:</th>
    	</tr>
    
    	<tr>
    	<td> <Input Type="Text" Name="txtFirstNumber" Size="5" value=""> </td>
    	<td> <Input Type="Text" Name="txtSecondNumber" Size="5" value=""> </td>
    	</tr>
    
    	<tr>
    	<td colspan="2"> Total: <Input Type="Text" Name="txtThirdNumber" Size="15" value = ""> </td>
    	</tr>
    
    	<tr>
    	<td colspan="2"> <Input Type="Button" Name="b1" Value="Add Numbers" onClick = calculate()> </td>
    	</tr>
    </table>
    </form>
    
    <script>
    function calculate() {
    	A = document.frmOne.txtFirstNumber.value;
    	B = document.frmOne.txtSecondNumber.value;
    	C = document.frmOne.txtThirdNumber.value;
    
    
    	A = Number(A);
    	B = Number(B);
    	C = Number(C);
    
    	C = (A + B + C);
    	document.frmOne.txtThirdNumber.value = C;
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    Mokeyjen (08-26-2014)

  • #3
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    6
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thank you for your response Sunfighter...

    I have been basically set this task by someone who is trying to teach me various aspects of javascript...

    They said to use an array (preferably) or a concatination string?! so that each time the add button is clicked it adds an extra line in the results box with the new result and ending up with a long list of the clicked results? Does this make sense?

    I am still getting my head around the basics!

    Thanks
    MJ

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,641 Times in 4,603 Posts
    If you mean you want a LIST of the various totals, then I would do something like this:
    Code:
     <!doctype html>
    <html>
    <head>
    <title>Adding Numbers Together</title>
    </head>
    
    <body>
    <form id = "frmOne"><!-- named forms are obsolete..and always put quotes around attributes -->
    <table border="1" >
    	<tr>
    	<th> Number One:</th>
    	<th> Number Two:</th>
    	</tr>
    
    	<tr>
    	<td> <Input Type="Text" Name="txtFirstNumber" Size="5" value=""> </td>
    	<td> <Input Type="Text" Name="txtSecondNumber" Size="5" value=""> </td>
    	</tr>
    
    	<tr>
    	<td colspan="2"> Totals: <textarea Name="totals" style="width: 400px; height: 300px;"></textarea></td>
    	</tr>
    
    	<tr>
    	<td colspan="2"> <Input Type="Button" Name="b1" Value="Add Numbers" onClick = calculate()> </td>
    	</tr>
    </table>
    </form>
    
    <script>
    function calculate() {
            var form = document.getElementById("frmOne"); // again, use the id
    	var A = form.txtFirstNumber.value;
    	var B = form.txtSecondNumber.value;
    
    	form.totals.value += A + " + " + B + " = " + (1*A+1*B) + "\n";
    	form.txtFirstNumber.value = form.txtSecondNumber.value = "";
    
    }
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Mokeyjen (08-27-2014)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,641 Times in 4,603 Posts
    If you really want to use an array, just replace the <script> in the above code with this:
    Code:
    <script>
    var Totals = [ ];
    
    function calculate() {
            var form = document.getElementById("frmOne"); // again, use the id
    	var A = form.txtFirstNumber.value;
    	var B = form.txtSecondNumber.value;
    
    	Totals.push( A + " + " + B + " = " + (1*A+1*B) );
            
            form.totals.value = Totals.join("\n");
    
    	form.txtFirstNumber.value = form.txtSecondNumber.value = "";
    
    }
    </script>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Mokeyjen (08-27-2014)

  • #6
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    6
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks Old Pedant, those are perfectly what I am looking for. Now I just need to understand how it all works! :-)

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,719
    Thanks
    25
    Thanked 662 Times in 661 Posts
    I have always like W3Schools Online Web Tutorials
    Here is a link to javascript arrays JavaScript Arrays
    To the left is a menu that offers JavaScript Array Methods array methods.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •