...

View Full Version : Adding Forms



zda2
03-23-2012, 08:44 PM
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:



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

Old Pedant
03-23-2012, 09:06 PM
Why would you do this:

<script type="text/javascript">
var title = "<strong>Assignment 1 </br> Aughtman, Zackary</strong>"
document.write(title.fontsize(5));
</script>
Instead of simply


<strong>Assignment 1 </br> Aughtman, Zackary</strong>

without the JavaScript??

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

*********



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.

zda2
03-23-2012, 10:48 PM
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.

Old Pedant
03-23-2012, 11:00 PM
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.)

Old Pedant
03-23-2012, 11:02 PM
In other words:


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

zda2
03-24-2012, 02:43 AM
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.

Old Pedant
03-24-2012, 03:44 AM
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.

zda2
03-24-2012, 04:25 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum