# Re: JavaScript Help: Cost Savings Calculator

Discussion in 'HTML' started by Adam Pflug, Oct 1, 2005.

Here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitled Document</title>

<script type="text/javascript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Created by: www.jdstiles.com -->
<!-- Begin
function startCalc(){
interval = setInterval("calc()",1);
}
function calc(){
one = document.getElementById("firstBox").value;
two = document.getElementById("secondBox").value;
three = document.getElementById("thirdBox").value;
four = document.getElementById("fourthBox").value;
five = document.getElementById("fifthBox").value;
six = document.getElementById("sixthBox").value;
document.getElementById("seventhBox").value = (one * 1) + (two * 1) +
(three * 1) + (four * 1) + (five * 1) + (six * 1);
if (document.getElementById("servicefee1").checked)
fee = document.getElementById("servicefee1").value;
else if (document.getElementById("servicefee2").checked)
fee = document.getElementById("servicefee2").value;
else if (document.getElementById("servicefee3").checked)
fee = document.getElementById("servicefee3").value;
else if (document.getElementById("servicefee4").checked)
fee = document.getElementById("servicefee4").value;
else if (document.getElementById("servicefee5").checked)
fee = document.getElementById("servicefee5").value;
document.getElementById("TotalServiceFee").value = fee;
document.getElementById("TotalMonthlySavings").value =
document.getElementById("seventhBox").value + fee;
document.getElementById("TotalYearlySavings").value =
Math.round((document.getElementById("seventhBox").value + fee) * 12 *
100) / 100;
}
function stopCalc(){
clearInterval(interval);
}
// End -->
</script>
<style type="text/css">
<!--
..style1 {font-family: Arial, Helvetica, sans-serif}
..style2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #CCCCCC;
font-weight: bold;
}
..style4 {font-family: Arial, Helvetica, sans-serif; font-weight: bold;
}
..style6 {
font-family: Arial, Helvetica, sans-serif;
color: #666666;
font-weight: bold;
}
-->
</style>

<body>

<form name="autoSumForm">
<p class="style2">Step One: Total Monthly Personal Costs </p>
<tr>
<td width="53%" class="style1">Personal Monthly Cost One </td>
<td width="47%"><input type=text id="firstBox" name="firstBox"
value="" onFocus="startCalc();" onBlur="stopCalc();"></td>
</tr>
<tr>
<td class="style1">Personal Monthly Cost Two </td>
<td><input type=text id="secondBox" name="secondBox" value=""
onFocus="startCalc();" onBlur="stopCalc();"></td>
</tr>
<tr>
<td class="style1">Personal Monthly Cost Three </td>
<td><input type=text id="thirdBox" name="thirdBox" value=""
onFocus="startCalc();" onBlur="stopCalc();"></td>
</tr>
<tr>
<td class="style1">Personal Monthly Cost Four </td>
<td><input type=text id="fourthBox" name="fourthBox" value=""
onFocus="startCalc();" onBlur="stopCalc();"></td>
</tr>
<tr>
<td class="style1">Personal Monthly Cost Five </td>
<td><input type=text id="fifthBox" name="fifthBox" value=""
onFocus="startCalc();" onBlur="stopCalc();"></td>
</tr>
<tr>
<td class="style1">Personal Monthly Cost Six </td>
<td><input type=text id="sixthBox" name="sixthBox" value=""
onFocus="startCalc();" onBlur="stopCalc();"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<p class="style2">Step Two: Select Monthly Service Fees</p>
<span class="style6">The user will select a &quot;Service Fee&quot;
and the selection will appear in the &quot;Total Service Fee Cost&quot;
below.
</span>
<tr>
<td width="40%" class="style1">Select Service Fee 1 </td>
\$150.95</td>
</tr>
<tr>
<td class="style1">Select Service Fee 2 </td>
onchange="calc()" value="160.95">
\$160.95</td>
</tr>
<tr>
<td class="style1">Select Service Fee 3 </td>
onchange="calc()" value="180.95">
\$180.95</td>
</tr>
<tr>
<td class="style1">Select Service Fee 4 </td>
onchange="calc()" value="190.95">
\$190.95</td>
</tr>
<tr>
<td class="style1">Select Service Fee 5 </td>
onchange="calc()" value="200.95">
\$200.95</td>
</tr>
</table>
<br>
<tr bgcolor="#EBEBEB">
<td width="53%" class="style4">Total Personal Costs </td>
<td width="47%"><input type=text id="seventhBox"
name="seventhBox" > </td>
</tr>
<tr bgcolor="ebebeb">
<td class="style4">Total Service Fee Cost </td>
<td><input name="TotalServiceFee" type=text id="TotalServiceFee"
> </td>

</tr>
<tr bgcolor="ebebeb">
<td class="style4">Total Monthly Savings </td>
<td><input name="TotalMonthlySavings" type=text
id="TotalMonthlySavings" ></td>
</tr>
<tr bgcolor="ebebeb">
<td class="style4">Total Yearly Savings </td>
<td><input name="TotalYearlySavings" type=text
id="TotalYearlySavings" ></td>
</tr>
</table>
<br>
<br>
<br>
<p class="style6">How can I get the script to calculate Total yearly
savings?</p>
<p class="style6">Here's the equation.</p>
<table width="230" height="74" border="1" bgcolor="efefef">
<tr>
<td align="right" valign="top"><p class="style1">Total Personal
Costs<br>
-Total Service Fee Cost<br>
-----------------------------<br>
= Total Monthly Savings<br>
x 12 Total Yearly Savings
</p>
</td>
</tr>
</table>
<p>&nbsp; </p>
<p> <br>
</p>
</form>

</body>
</html>

2. ### rfGuest

[a bloody huge amount of HTML with no indication at all where the OP's
problem may have been]

Cheers
Richard,

now ignoring *anything* posted from groups.google as being largely
irrelevant and rarely adhering to usenet etiquette.

rf, Oct 1, 2005

3. ### ObviousGuest

Obvious, Oct 1, 2005
4. ### FredGuest

On 1 Oct 2005 03:08:02 -0700, "Adam Pflug" <>
wrote:

>Here:
>
><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
>"http://www.w3.org/TR/html4/loose.dtd">
><html>
><meta http-equiv="Content-Type" content="text/html;
>charset=iso-8859-1">
><title>Untitled Document</title>
>
><script type="text/javascript">
><!-- This script and many more are available free online at -->
><!-- The JavaScript Source!! http://javascript.internet.com -->
><!-- Created by: www.jdstiles.com -->
><!-- Begin
>function startCalc(){
> interval = setInterval("calc()",1);
>}
>function calc(){
> one = document.getElementById("firstBox").value;
> two = document.getElementById("secondBox").value;
> three = document.getElementById("thirdBox").value;
> four = document.getElementById("fourthBox").value;
> five = document.getElementById("fifthBox").value;
> six = document.getElementById("sixthBox").value;
> document.getElementById("seventhBox").value = (one * 1) + (two * 1) +
>(three * 1) + (four * 1) + (five * 1) + (six * 1);
> if (document.getElementById("servicefee1").checked)
> fee = document.getElementById("servicefee1").value;
> else if (document.getElementById("servicefee2").checked)
> fee = document.getElementById("servicefee2").value;
> else if (document.getElementById("servicefee3").checked)
> fee = document.getElementById("servicefee3").value;
> else if (document.getElementById("servicefee4").checked)
> fee = document.getElementById("servicefee4").value;
> else if (document.getElementById("servicefee5").checked)
> fee = document.getElementById("servicefee5").value;
> document.getElementById("TotalServiceFee").value = fee;
> document.getElementById("TotalMonthlySavings").value =
>document.getElementById("seventhBox").value + fee;
> document.getElementById("TotalYearlySavings").value =
>Math.round((document.getElementById("seventhBox").value + fee) * 12 *
>100) / 100;
>}
>function stopCalc(){
> clearInterval(interval);
>}
>// End -->
></script>
><style type="text/css">
><!--
>.style1 {font-family: Arial, Helvetica, sans-serif}
>.style2 {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 14px;
> background-color: #CCCCCC;
> font-weight: bold;
>}
>.style4 {font-family: Arial, Helvetica, sans-serif; font-weight: bold;
>}
>.style6 {
> font-family: Arial, Helvetica, sans-serif;
> color: #666666;
> font-weight: bold;
>}
>-->
></style>
>
><body>
>
><form name="autoSumForm">
> <p class="style2">Step One: Total Monthly Personal Costs </p>
> <table width="50%" cellpadding="2" cellspacing="3" >
> <tr>
> <td width="53%" class="style1">Personal Monthly Cost One </td>
> <td width="47%"><input type=text id="firstBox" name="firstBox"
>value="" onFocus="startCalc();" onBlur="stopCalc();"></td>
> </tr>
> <tr>
> <td class="style1">Personal Monthly Cost Two </td>
> <td><input type=text id="secondBox" name="secondBox" value=""
>onFocus="startCalc();" onBlur="stopCalc();"></td>
> </tr>
> <tr>
> <td class="style1">Personal Monthly Cost Three </td>
> <td><input type=text id="thirdBox" name="thirdBox" value=""
>onFocus="startCalc();" onBlur="stopCalc();"></td>
> </tr>
> <tr>
> <td class="style1">Personal Monthly Cost Four </td>
> <td><input type=text id="fourthBox" name="fourthBox" value=""
>onFocus="startCalc();" onBlur="stopCalc();"></td>
> </tr>
> <tr>
> <td class="style1">Personal Monthly Cost Five </td>
> <td><input type=text id="fifthBox" name="fifthBox" value=""
>onFocus="startCalc();" onBlur="stopCalc();"></td>
> </tr>
> <tr>
> <td class="style1">Personal Monthly Cost Six </td>
> <td><input type=text id="sixthBox" name="sixthBox" value=""
>onFocus="startCalc();" onBlur="stopCalc();"></td>
> </tr>
> <tr>
> <td>&nbsp;</td>
> <td>&nbsp;</td>
> </tr>
> </table>
> <p class="style2">Step Two: Select Monthly Service Fees</p>
> <span class="style6">The user will select a &quot;Service Fee&quot;
>and the selection will appear in the &quot;Total Service Fee Cost&quot;
>below.
> </span>
> <table width="50%" cellpadding="2" cellspacing="3" >
> <tr>
> <td width="40%" class="style1">Select Service Fee 1 </td>
> \$150.95</td>
> </tr>
> <tr>
> <td class="style1">Select Service Fee 2 </td>
>onchange="calc()" value="160.95">
> \$160.95</td>
> </tr>
> <tr>
> <td class="style1">Select Service Fee 3 </td>
>onchange="calc()" value="180.95">
> \$180.95</td>
> </tr>
> <tr>
> <td class="style1">Select Service Fee 4 </td>
>onchange="calc()" value="190.95">
> \$190.95</td>
> </tr>
> <tr>
> <td class="style1">Select Service Fee 5 </td>
>onchange="calc()" value="200.95">
> \$200.95</td>
> </tr>
> </table>
> <br>
> <table width="50%" cellpadding="2" cellspacing="3" >
> <tr bgcolor="#EBEBEB">
> <td width="53%" class="style4">Total Personal Costs </td>
> <td width="47%"><input type=text id="seventhBox"
>name="seventhBox" > </td>
> </tr>
> <tr bgcolor="ebebeb">
> <td class="style4">Total Service Fee Cost </td>
> <td><input name="TotalServiceFee" type=text id="TotalServiceFee"
>> </td>

> </tr>
> <tr bgcolor="ebebeb">
> <td class="style4">Total Monthly Savings </td>
> <td><input name="TotalMonthlySavings" type=text
>id="TotalMonthlySavings" ></td>
> </tr>
> <tr bgcolor="ebebeb">
> <td class="style4">Total Yearly Savings </td>
> <td><input name="TotalYearlySavings" type=text
>id="TotalYearlySavings" ></td>
> </tr>
> </table>
> <br>
> <br>
> <br>
> <p class="style6">How can I get the script to calculate Total yearly
>savings?</p>
> <p class="style6">Here's the equation.</p>
> <table width="230" height="74" border="1" bgcolor="efefef">
> <tr>
> <td align="right" valign="top"><p class="style1">Total Personal
>Costs<br>
> -Total Service Fee Cost<br>
> -----------------------------<br>
> = Total Monthly Savings<br>
> x 12 Total Yearly Savings
> </p>
> </td>
> </tr>
> </table>
> <p>&nbsp; </p>
> <p> <br>
> </p>
></form>
>
></body>
></html>

Fred, Oct 1, 2005

rf wrote:
>
> [a bloody huge amount of HTML with no indication at all where the OP's
> problem may have been]
>
> Cheers
> Richard,
>
> now ignoring *anything* posted from groups.google as being largely
> irrelevant and rarely adhering to usenet etiquette.

I'm very new to usenet, and am really trying to figure it out. As to
not commenting about where he went wrong... he didnt really try to
implement the parts that were missing, so I just filled them in for
him, If he understands javascript at all (which he obviously does if he
got partway there) then he ought to be able to figure out how to do the
rest based on the code I gave him which solves his problem (albeit not
as efficiently as it could), the changes were all in one place (aside
from id's added to some elements).

If you have any tips for what proper usenet etiquette looks like (or a
it. What I've been doing looks fine in google groups which I assumed
was all that I needed to be aware of. Perhaps this would explain why my
posts seem like they are being ignored much of the time, even though I
think I'm actually being helpful in many cases. Constructive critisim
helps alot more then just blasting me for violating rules I'm not aware
of.

7. ### rfGuest

> rf wrote:
> >
> > [a bloody huge amount of HTML with no indication at all where the OP's
> > problem may have been]
> >
> > Cheers
> > Richard,
> >
> > now ignoring *anything* posted from groups.google as being largely
> > irrelevant and rarely adhering to usenet etiquette.

<snip>

> If you have any tips for what proper usenet etiquette looks like (or a
> it.

You seem to have got it right this time and have made off my ignore list
. You have quoted the bit to which you are replying, you have included an
attribution. You did fail to trim the bits of my post that are irrelevant to
your reply (my sig. OK, it's not a proper sig, but it could have been
snipped).

Your prior post simply landed in my newsreader[1] with none of the above,
simply a "here" followed by pages of HTML. I had to search through the
thread (OK, there is only one other post) to find out what you were
referring to, and even then I did not find anything, having not bothered to
look at the source of the page the OP provided a URL for.

> What I've been doing looks fine in google groups which I assumed
> was all that I needed to be aware of.

No, it is not. Google groups is merely a badly designed HTML interface into
usenet. Usenet is a collection of newsgroups that have nothing at all to do
with the web or HTML (well, apart from their content, that is). The only
usefull thing about google groups is that it archives usenet posts and
should only be used IMHO to search this archive.

> Perhaps this would explain why my
> posts seem like they are being ignored much of the time, even though I
> think I'm actually being helpful in many cases.

Quite possibly. Many people here have their newsreader[1] set to
automatically disregard anything posted from google groups. Search the
archive for any post that contains "blinky" in the from field. Look at
Blinky the Shark's sig. You will see he ignores google groups but he also
kindly provides a link to a page that you should read. Here it is:

> Constructive critisim
> helps alot more then just blasting me for violating rules I'm not aware
> of.

Use google groups for what it was originally designed for. Search the
archive for this group for posts with google groups in them. You will see a
pattern emerging.

[1] You would be far better off obtaining yourself a real newsreader (you
probably already have one, Outlook Express will even do for starters) and
point it to your ISP's news server, or one of the other free news servers
out there (search the archive). That way you will be accessing usenet
directly instead of via the ever to be damned google groups interface, and
you will be seen by the people mentioned above, and you won't have to jump
through hoops to make your post acceptable. Good luck

Cheers
Richard.

rf, Oct 2, 2005