SIMPLE Javascript Calculator

**Dr John Stockton** · Jul 11 '06, 10:45 PM

Re: SIMPLE Javascript Calculator

JRS: In article <e8vlro$n05$1$8 302bc10@news.de mon.co.uk>, dated Tue, 11
Jul 2006 09:00:55 remote, seen in news:comp.lang. javascript, Richard
Cornford <Richard@litote s.demon.co.ukpo sted :

>Dr John Stockton wrote:
><snip>

>Lee's code does not work for me - button gives "Object
>doesn't support this action", line 14 char 5. I don't
>see why - the line is
> for (item in price) {
>But for (var item in price) { works.

><snip>
>
>Because IE browsers use the window/global object to implement the -
>frames - collection the window/global object has an - item - method.
>Without declaring - item - as a global variable the Identifier will be
>scope resolved as that - item - method of the global/window object and
>as a host provided method it is allowed to be read only, so assignments
>to - item - may (and clearly do) error.

That supports the principle that every identifier used within a function
should be declared as a var within that function, or passed in as an
argument, except where it is necessary not to do so.

Also the principle that programmer-introduced identifiers should never
be correctly-spelt (or US-spelt) words - Lee's code works for me when
"item" is changed to "iteem".

Javascript needs an equivalent of VBScript's "Option Explicit".

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.c om/faq/>? JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htmjscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/TP/BP/Delphi/jscr/&c, FAQ items, links.

**Dr John Stockton** · Jul 11 '06, 10:45 PM

Re: SIMPLE Javascript Calculator

JRS: In article <1152609804.911 230.11250@p79g2 000cwp.googlegr oups.com>,
dated Tue, 11 Jul 2006 02:23:24 remote, seen in
news:comp.lang. javascript, richardmgreen <richardmgreen1 @tiscali.co.uk>
posted :

>Unfortunatel y, this still looks a little complex for my needs. I
>forgot to mention I'm a complete newbie at this and just wanted
>something to do a simple calulation, i.e. take two inputs from
>drop-down menus (both numeric), do some simple maths as outlined above
>and return the result.

If you read the newsgroup FAQ and start complying with its
recommendations for effective reply formatting - they are fully
compatible with those for the Big-8 newsgroups, and those for news:uk.*
(see sig line 3); you may find that the experts regain some interest in
trying to educate you. If you do not, the programming advice that you
will be offered will come from the less intelligent.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 MIME. ©
Web <URL:http://www.merlyn.demo n.co.uk/- FAQish topics, acronyms, & links.
Plaintext, quoting : see <URL:http://www.usenet.org. uk/ukpost.html>
Do not Mail News to me. Before a reply, quote with ">" or "" (SoRFC1036)

**mistral** · Jul 12 '06, 09:15 AM

Re: SIMPLE Javascript Calculator

firstcustomer@g mail.com Ð¿Ð¸ÑÐ°Ð»(Ð°):

Hi,

Firstly, I know NOTHING about Javascript I'm afraid, so I'm hoping that
someone will be able to point me to a ready-made solution to my
problem!

A friend of mine (honest!) is wanting to have on his site, a Javascript
Calculator for working out the cost of what they want, for example:

1 widget and 2 widglets = Â£5.00
2 widgets and 2 widglets = Â£7.00

etc etc

He is wanting a solution so that users are faced with two (or maybe
more) drop down boxes where they select how many "widgets" and
"widglets" they want to buy, and the script outputs the price (by
multiplying the two figures).

Can this be done? If so, could someone please kindly supply me with the
script.
>
TIA, Neil.

---------------------

Here is simple calculator you can use:

<?xml version = "1.0"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html>

<head>
<title>JavaScri pt Calculator</title>
<script>
var total = 0;
var isNew = true;
var op;

function Calculate()
{
var num = parseInt(docume nt.Calculator.n umbers.value);

switch(op)
{
case "plus":
{
total += num;
break;
}
case "minus":
{
total -= num;
break;
}
case "multiply":
{
total *= num;
break;
}
case "divide":
{
total /= num;
break;
}
default:
{
break;
}
}

document.Calcul ator.numbers.va lue = total;
}

function SetTotal()
{
Calculate();
total = null;
isNew = true;
}

function SetOperator(set Op)
{
if (total != null)
{
Calculate();
}
else
{
total = parseInt(docume nt.Calculator.n umbers.value);
}

op = setOp;
isNew = true;
}

function SetNumber(num)
{
if (isNew == true)
{
document.Calcul ator.numbers.va lue = num;
isNew = false;
}
else
{
document.Calcul ator.numbers.va lue += num;
}
}

function ClearTotal()
{
total = null;
document.Calcul ator.numbers.va lue = "";
isNew = true;
}

function ReturnNumber()
{
window.returnVa lue = document.Calcul ator.numbers.va lue;
}

function CloseCalculator ()
{
window.close();
}
</script>

</head>

<body onunload="Retur nNumber();">

<form name="Calculato r">

<table width="200">
<tr>
<td colspan="2">
<input type="text" size="27" name="numbers"
style="text-align:right">
</td>
</tr>
<tr>
<td style="width: 155px">
<button style="width:35 px; height:35px; font-weight:bold"
name="seven" onclick="SetNum ber(7);">7</button> 
<button style="width:35 px; height:35px; font-weight:bold"
name="eight" onclick="SetNum ber(8);">8</button> 
<button style="width:35 px; height:35px; font-weight:bold"
name="nine" onclick="SetNum ber(9);">9</button> 
<button style="width:35 px; height:35px; font-weight:bold"
name="divide" onclick="SetOpe rator('divide') ;">/</button></td>
<td>
<button style="width: 35px; height:35px; font-weight:bold"
name="clear" onclick="ClearT otal();">C</button>
</td>
</tr>
<tr>
<td>
<button style="width:35 px; height:35px; font-weight:bold"
name="four" onclick="SetNum ber(4);">4</button> 
<button style="width:35 px; height:35px; font-weight:bold"
name="button" onclick="SetNum ber(5);">5</button> 
<button style="width:35 px; height:35px; font-weight:bold"
name="six" onclick="SetNum ber(6);">6</button> 
<button style="width:35 px; height:35px; font-weight:bold"
name="multiply" onclick="SetOpe rator('multiply ');">*</button>
</td>
<td rowspan="3">
<button style="width: 35px; height:115px; font-weight:bold"
name="equals" onclick="SetTot al();">=</button>
</td>
</tr>
<tr>
<td>
<button style="width:35 px; height:35px; font-weight:bold"
name="one" onclick="SetNum ber(1);">1</button> 
<button style="width:35 px; height:35px; font-weight:bold"
name="two" onclick="SetNum ber(2);">2</button> 
<button style="width:35 px; height:35px; font-weight:bold"
name="three" onclick="SetNum ber(3);">3</button> 
<button style="width:35 px; height:35px; font-weight:bold"
name="minus" onclick="SetOpe rator('minus'); ">-</button>
</td>
</tr>
<tr>
<td>
<button style="width:11 3px; height: 35px; font-weight:bold"
name="zero" onclick="SetNum ber(0);">0</button> 
<button style="width:35 px; height:35px; font-weight:bold"
name="plus" onclick="SetOpe rator('plus');" >+</button>
</td>
</tr>
<tr>
<td colspan="2">
<button style="width:19 2px; height: 35px;" name="close"
onclick="CloseC alculator(0);"> Close Calculator</button>
</td>
</tr>
</table>
</form>
</body>

</html>

To use the calculator, copy the abovementioned code and paste it into a
notepad. Save the page as calculator.htm.

Here is page you will call calculator from.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>Untitl ed 1</title>
<script>
function OpenCalculator( )
{
var ret;
var spanTag;

ret = window.showModa lDialog("calcul ator.htm", "",
"dialogHeight:3 25px; dialogWidth:215 px; resizable:yes;" );

spanTag = document.all.ta gs("span").item ("numbers");
spanTag.innerTe xt = ret;
}
</script>
</head>

<body>

<p><a href="javascrip t:OpenCalculato r();">Calculate Numbers</a></p>

<p>The number is: <span id="numbers"></span></p>

</body>

</html>
-----------------------
Mistral

**Richard Cornford** · Jul 12 '06, 10:55 AM

Re: SIMPLE Javascript Calculator

mistral wrote:
<snip>

<?xml version = "1.0"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

<snip>

ret = window.showModa lDialog("calcul ator.htm", "",
"dialogHeight:3 25px; dialogWidth:215 px; resizable:yes;" );

<snip>

LOL. An XHTML document being written in the most IE dependent was
possible?

Richard.

**mistral** · Jul 12 '06, 11:05 AM

Re: SIMPLE Javascript Calculator

Richard Cornford Ð¿Ð¸ÑÐ°Ð»(Ð°):

mistral wrote:
<snip>

<?xml version = "1.0"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

<snip>

ret = window.showModa lDialog("calcul ator.htm", "",
"dialogHeight:3 25px; dialogWidth:215 px; resizable:yes;" );
<snip>

LOL. An XHTML document being written in the most IE dependent was
possible?

Richard.

-------------------

Its not really important. Just when use this calculator with the
ShowModalDialog method, we can return a calculated value to the calling
page. Here's how it works: we provide a link to the calculator from a
Web page that references a JavaScript function that uses the
ShowModalDialog method; then when a user closes the calculator, the
total is returned to the first page through the JavaScript function
that called the ShowModalDialog method.

mistral

**Richard Cornford** · Jul 12 '06, 11:45 AM

Re: SIMPLE Javascript Calculator

mistral wrote:

Richard Cornford Ð¿Ð¸ÑÐ°Ð»(Ð°):
mistral wrote:
<snip>

<?xml version = "1.0"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

<snip>
>
ret = window.showModa lDialog("calcul ator.htm", "",
"dialogHeight:3 25px; dialogWidth:215 px; resizable:yes;" );
<snip>
>

>LOL. An XHTML document being written in the most IE dependent way
>possible?

<snip>

>
Its not really important. Just when use this calculator ... called the
ShowModalDialog method.

That doesn't make using XHTML mark-up exclusively on a browser that can
never interpret it as XHTML any less funny.

Richard.

**Randy Webb** · Jul 12 '06, 12:45 PM

Re: SIMPLE Javascript Calculator

Richard Cornford said the following on 7/12/2006 7:50 AM:

mistral wrote:

>Richard Cornford Ð¿Ð¸ÑÐ°Ð»(Ð°):
>mistral wrote:
> <snip>

> <?xml version = "1.0"?>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

> <snip>
>>
> ret = window.showModa lDialog("calcul ator.htm", "",
> "dialogHeight:3 25px; dialogWidth:215 px; resizable:yes;" );
> <snip>
>>

>>LOL. An XHTML document being written in the most IE dependent way
>>possible?

<snip>

>Its not really important. Just when use this calculator ... called the
>ShowModalDialo g method.

>
That doesn't make using XHTML mark-up exclusively on a browser that can
never interpret it as XHTML any less funny.

Hilariously funny at that.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

**Jim Carlock** · Jul 12 '06, 10:55 PM

Re: SIMPLE Javascript Calculator

mistral posted:

<snip>
>
<?xml version = "1.0"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
>
</snip>
>
<snip>
ret = window.showModa lDialog("calcul ator.htm", "",
"dialogHeight:3 25px; dialogWidth:215 px; resizable:yes;" );
</snip>

Richard Cornford stated:

LOL. An XHTML document being written in the most IE
dependent way possible?

Richard Cornford grunted:

That doesn't make using XHTML mark-up exclusively on a
browser that can never interpret it as XHTML any less funny.

"Randy Webb" <HikksNotAtHome @aol.comwrote:

Hilariously funny at that.

I'm interested in the laughs. Do I need to encode Mistral's code
into a document to see it?

--
Jim Carlock
Post replies to the group.

**Randy Webb** · Jul 13 '06, 06:05 AM

Re: SIMPLE Javascript Calculator

Jim Carlock said the following on 7/12/2006 7:00 PM:

mistral posted:

><snip>
>>
><?xml version = "1.0"?>
><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
>>
></snip>
>>
><snip>
> ret = window.showModa lDialog("calcul ator.htm", "",
> "dialogHeight:3 25px; dialogWidth:215 px; resizable:yes;" );
> </snip>

>
Richard Cornford stated:

>LOL. An XHTML document being written in the most IE
>dependent way possible?

>
Richard Cornford grunted:

>That doesn't make using XHTML mark-up exclusively on a
>browser that can never interpret it as XHTML any less funny.

>
"Randy Webb" <HikksNotAtHome @aol.comwrote:

>Hilariously funny at that.

>
I'm interested in the laughs. Do I need to encode Mistral's code
into a document to see it?
>

If you want. But, IE doesn't support xHTML in *any* way even remotely
resembling anything of use. If you server it as text/html then it will
render it as error-corrected tag soup. If you serve it as
application/xhtml+xml then IE prompts with a Save As dialog box.

So, trying to script a document that IE doesn't support using IE only
code is, well, Hilariously funny.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

**Jim Carlock** · Jul 13 '06, 05:15 PM

Re: SIMPLE Javascript Calculator

Jim Carlock said the following on 7/12/2006 7:00 PM:

I'm interested in the laughs. Do I need to encode Mistral's code
into a document to see it?

"Randy Webb" <HikksNotAtHome @aol.composted:

IE doesn't support xHTML in *any* way even remotely...
If you serve it as text/html then IE renders it as error-corrected
tag soup. If you serve it as application/xhtml+xml, IE prompts
with a Save As dialog box.

Thanks. The following links helped as well, in case others follow
along.

The Road to XHTML 2.0: MIME Types

http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html

www.XML.com,Textuality Services,Mark Pilgrim,Specifications,The Road to XHTML 2.0: MIME Types

http://sastools.com/b2/post/79394232

w3.org provides some help as well.

XHTML Frequently Answered Questions

http://www.w3.org/MarkUp/2004/xhtml-faq

--
Jim Carlock
Post replies to the group.