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

Thread: Adding Forms

  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Adding Forms

    I am trying to take the add the numbers input into form boxes 1 and 2 and then output them onto the screen following the form boxes. I have tried many different functions and none of them will work. Can anyone point me in the right direction? Here's my code so far:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Math and Compare</title>
    <link rel="stylesheet" type="text/css" href="assignment1.css" />	
    
    
    <div align="center">
    <script type="text/javascript">
    var title = "<strong>Assignment 1 </br> Aughtman, Zackary</strong>"
    document.write(title.fontsize(5));
    </script>
    <script type="text/javascript">
    function result_One(firstNum, secondNum, result1)
    		{
    			firstNum = document.getElementById("box1").value;
    			secondNum = document.getElementById("box2").value;
    			result_One = this.firstNum + this.secondNum;
    			return calc.result_One;
    		}
    </script>
    
    </head>
    
    <body>
    </br>
    </br>
    <div id="div1" align="center">
    <strong>Addition</strong>
    </div>
    
    	<table align = "center">
    		<tr>
    			<td>
    				<form id="box1">
    				<input type="text" value="" id="box1" class="box1" /> +
    				<input type="text" value="" id="box2" class="box2" /> = 000000000
    				</br>
    				<div align="center">
    				<input type="button" value="Add" id="add"  onclick="result_One;" />
    			</td>
    		</tr>
    	</table>
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Why would you do this:
    Code:
    <script type="text/javascript">
    var title = "<strong>Assignment 1 </br> Aughtman, Zackary</strong>"
    document.write(title.fontsize(5));
    </script>
    Instead of simply
    Code:
    <strong>Assignment 1 </br> Aughtman, Zackary</strong>
    without the JavaScript??

    document.write is best avoided when you don't need it.

    *********

    Code:
    function result_One( ) /* no paramters...you aren't using them! */
    		{
    			firstNum = document.getElementById("box1").value;
    			secondNum = document.getElementById("box2").value;
    			result_One = this.firstNum + this.secondNum;
    			document.getElementById("RESULT").innerHTML = result_One;
    		}
    
    ... replace your 0000000 with
    
        <span id="RESULT">00000000</span>
    
    .... and fix your button:
    
        <input type="button" value="Add" onclick="result_One();" />
    This code won't quite do what you think. See if you can figure out why.
    Last edited by Old Pedant; 03-23-2012 at 09:09 PM.
    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:

    zda2 (03-24-2012)

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    This code won't quite do what you think. See if you can figure out why.
    That's a good question. I thought that it might be because I named the function result_One() and the output result_One. So I changed that and I get "undefined" followed by the number that I typed into box2, i.e. if I type 1 + 2, I get "undefined2" instead of 3. I honestly don't know what's causing this.

    I have tried several things and keep getting the same message. Why won't this work?

    Also, thanks for the advice on the innerHTML method. I had never used that one before. I researched it and it looks like it will come in handy in the future.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Zap the word this

    Wrong:
    result_One = this.firstNum + this.secondNum;

    Try:
    result_One = firstNum + secondNum;

    (I don't even see why you get the 2!)

    ****************

    > I thought that it might be because I named the function result_One() and the output result_One

    That's not good practice, but it could have worked if you use var when declaring the variable. As you should for all variables in a function unless you *MEAN* for them to be seen outside the function. (Which you don't, for this problem.)
    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:

    zda2 (03-24-2012)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    In other words:
    Code:
    function result_One( ) /* no paramters...you aren't using them! */
    {
    	var firstNum = document.getElementById("box1").value;
    	var secondNum = document.getElementById("box2").value;
    	var sum = firstNum + secondNum;
    	document.getElementById("RESULT").innerHTML = sum;
    }
    But even that won't *quite* work. (On purpose. Try to understand why.)
    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:

    zda2 (03-24-2012)

  • #6
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for the help. I am still lost. I declared all of the variables, gave them default values, and even checked for spelling/capitalization errors but I keep getting the same error message...

    I even tried to download a debugger for Google Chrome, but even that won't run.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    You have *TWO* things on your page with id="box1" !!!

    ILLEGAL!

    Each id on a page MUST be unique.

    You really don't need an id for you <form>, so just get rid of it there.
    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:

    zda2 (03-24-2012)

  • #8
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I literally just found that about ten minutes ago. I was signing back in to let you know when I saw your response. Thanks for following up with me. I appreciate everything.


  •  

    Posting Permissions

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