RobG said:
crjunk said:
I have 4 TextBoxes on my form that I'm trying to add together to get a
grand total. Here is the code I'm using:
Can anyone tell me what I'm doing wrong? I'm not very experienced
with JavaScripts.
[...]
Your code has some serious issues.
As your posting has. Particularly, it by far exceeds the accepted 80
characters per line. Mozilla/5.0 does not have problems with borken
quote as OE does have, so you really should adjust your settings.
Automatic line-break at column 76 is good, at column 72 is better
(because more quotation levels are possible without reformatting the
quotes).
var tempFed = +document.Form1['txtFedSup'].value;
I presume you have created a form with id="Form1". The syntax you've used
only works in IE, that is, using the element ID "Form1" as a global
variable.
Nonsense. The element's ID is _not_ used as a variable here but as a
property of the object referred to by `document'. That referencing
originates from DOM Level 0 (IE3/NN3) and works in many user agents,
including Mozilla/5.0. However, the standards compliant referencing
document.forms['Form1'].elements['txtFedSup'].value
as specified in DOM Level 1+ is very likely to work in *all* UAs as it
is downwards compatible to DOM Level 0.
See also
<
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/form.html>
<
http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/form.asp>
The "+" should not be there - I don't know what you are trying
to achieve with it.
Nonsense. The OP is using the unary "+" operator as the fastest method
to convert a value (here: of type "string") to type "number".
You have calls to two text boxes with the same name:
var tempCounty = +document.Form1['txtStateSup'].value;
so referencing them by name will give unpredictable results [...]
No, it will not. Instead, it will return a very much predictable result,
i.e. an array or a collection of elements with that name as it has been
since DOM Level 0. Unfortunately, that Array/HTMLCollection object will
most certainly not have a "value" property which is why this will store
NaN (the result of +undefined) in `tempCounty' then. Yet a very much
predictable result.
I've changed the name of one of them - unless you really want
to add the same value twice, or you only meant to have one of the calls.
You can get a reference to the table using the ID as follows:
var theTable = document.getElementById('Form1');
getElementById() is a method of DOM Level 1+ and is not supported in
every UA, see above. More, it is less efficient than using the "forms"
collection:
Or you can use the name of the form as follows (presuming you have made
the name="Form1"):
var tempFed = document.forms['Form1'].elements['txtFedSup'].value;
[...]
Below is code similar to yours that will work:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
The required system identifier (the URL of the DTD) is missing here. This
will trigger Quirks/Compatibility Mode in some UAs and is therefore likely
to produce unpredictable rendering results. Correct is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
See said:
<html>
<head>
<title> add em </title>
<meta name="description" content="Adds form content">
When using "meta" elements for inclusion of document meta information,
well-defined Dublin Core Metadata Terms should be used, not a proprietary
approach:
<meta name="DC.Description" content="Adds form content">
See <
http://dublincore.org/documents/dcmi-terms/>.
Furthermore, as intrinsic event handler attributes are used, it is
recommended to specify the default scripting language:
<meta http-equiv="Content-Script-Type" content="text/javascript">
See <
http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.2.1>.
However, IE will ignore this element and uses the language specified
for the previous script element instead.
</head>
<body>
<script type="text/javascript">
function calcTotalPub(theForm){
var tempFed = theForm.elements['txtFedSup'].value;
var tempState = theForm.elements['txtStateSup'].value;
var tempCounty = theForm.elements['txtStateSupA'].value;
var tempCity = theForm.elements['txtCitySup'].value;
theForm.elements['txtTotalPub'].value = Number(tempFed)
+ Number(tempState)
+ Number(tempCounty)
+ Number(tempCity);
}
</script>
</head>
<body>
1. Nesting error: The "head" element is closed again after the open
tag of the "body" element, and the "body" element is opened a
second time after the second </head> close tag.
2. Functions should not be declared within the "body" element but
within the "head" element, to make sure that they are declared
when called within the "body" element.
3. This function declaration contains four superfluous variable
declarations and causes even more superfluous lookup operations,
while it does check neither for arguments nor references to DOM
objects prior to access; I already mentioned that the unary "+"
is the most efficient method for conversion to number. This
much better is
function calcTotalPub(o)
{
var o2 = null;
if (o
&& (o = o.elements)
&& (o2 = o['txtTotalPub'])
&& typeof o2.value != "undefined")
{
o2.value =
(o['txtFedSup'] ? +o['txtFedSup'].value : 0)
+ (o['txtStateSup'] ? +o['txtStateSup'].value : 0)
+ (o['txtStateSupA'] ? +o['txtStateSupA'].value : 0)
+ (o['txtCitySup'] ? +o['txtCitySup'].value : 0);
}
}
<h2>Here is the form</h2>
<form name="Form1">
A "form" element does not need to have a name, and since the name is used no
longer, it does not need to have one here. Instead, an "action" attribute
value is "#REQUIRED":
<form action="...">
See said:
<input type="text" name="txtFedSup">txtFedSup<br>
<input type="text" name="txtStateSup">txtStateSup<br>
<input type="text" name="txtStateSupA">txtStateSupA<br>
<input type="text" name="txtCitySup">txtCitySup<br>
<input type="text" name="txtTotalPub" value="--">txtTotalPub<br>
Since "TEXT" is the initial value for the "type" attribute of the
"input" element, this attribute-value pair can be safely omitted:
<input name="txtFedSup">txtFedSup<br>
...
See said:
<input type="button" value="Add 'em"
onclick="calcTotalPub(this.form);"><br>
Since this button only works if client-side script support is present,
it should be written dynamically to avoid confusion/irritation among
users of client applications without that feature:
<script type="text/javascript">
document.write(
'<input type="button" value="Add \'em"'
+ ' onclick="calcTotalPub(this.form);"><br>');
<input type="reset" onclick="reset();">
You have no reset() method defined but you call it in your code, BTW
completely unnecessarily.
After all, I would not call your code a good example, it is more like
once more an example of how not to do it.
PointedEars