f



third program can't find why it won't work.

I am learning javascript from a book. I admit it is not the easiest or
best way, but I wanted to learn and I had the books purchased from
awhile back. I have some familiarity with C and HTML and wanted to
expand my programming base. I have tried two of the programs in this
book and they worked fine. Now on the third one I can't seem to get it
to work. I know it is probably something simple but could you give it
a look and steer me in the right direction?
Here is the code the Script and HTML commands are commented out. I
thought is was suppose to return a total value.

<!--ml>
	<head>
		<TITLE> Coffee Shop menu </TITLE>

		<!--ipt language="javascript">
		function addup(){
		var total;
		var drinkbase;
		var taxrate=.08 ;
		var opts=f.drink;
		drinkbase=f.drink[opts.selectedIndex].value;
		var sizefactor;
		var i;

			for (i=0; i<f.sizef.length; i++){
				if (f.sizef[i].checked) {
				sizefactor=f.sizef[i].value; break;}
				}
			total=sizefactor*drinkbase;

			total=total*(1+taxrate);
			f.label.value="Total with tax";
			f.totalf.value="total";
			return=false;
			}


		</scr--!>
	</HEAD>
	<BODY>
		<h2> Coffee Shop</h2><p>

		<form name="f" onsubmit="return addup();" >

			<select name="drink">

				<option value="2.50">coffee
				<option value="2.25">hot cocoa
				<option value="1.00">chai tea

			</select>
			<br>
			<input type="radio" name="sizef" value="1"> tall

			<input type="radio" name="sizef" value="1.5"> grande

			<input type="radio" name="sizef" value="2"> super

			<input type="submit" value="order" >
			<br>
			<input type="text" name="label" value="">
			<input type="text" name="totalf" value="">




		</form>

	</body>
<!--tml>
0
meh
3/22/2009 11:22:33 PM
comp.lang.javascript 38370 articles. 0 followers. javascript4 (1315) is leader. Post Follow

4 Replies
520 Views

Similar Articles

[PageSpeed] 4

On Mar 23, 9:22 am, meh <mscomptc...@gmail.com> wrote:
> I am learning javascript from a book.

Which book?  It's always good to say which one - most are very
ordinary (or worse), those worth having as references are included in
the FAQ:

"3.1 What books are recommended for javascript?"
<URL: http://www.jibbering.com/faq/#books >

> I admit it is not the easiest or
> best way, but I wanted to learn and I had the books purchased from
> awhile back. I have some familiarity with C and HTML and wanted to
> expand my programming base. I have tried two of the programs in this
> book and they worked fine. Now on the third one I can't seem to get it
> to work. I know it is probably something simple but could you give it
> a look and steer me in the right direction?
> Here is the code the Script and HTML commands are commented out. I
> thought is was suppose to return a total value.
>
> <!--ml>

No need to be coy with tag names, just post the markup.


>         <head>
>                 <TITLE> Coffee Shop menu </TITLE>
>
>                 <!--ipt language="javascript">

The language attribute has been deprecated for quite some time, the
type attribute is required.

<script type="text/javascript">


>                 function addup(){
>                 var total;
>                 var drinkbase;
>                 var taxrate=.08 ;
>                 var opts=f.drink;

The assignment here depends on an IE feature where the name and id
attributes of HTML elements are added as global variables (the
variable f).  It must have seemed like a good idea at the time to IE's
developers, but has proven to be a serious inconvenience.  The simple
solution is to ensure global variables (or any variable for safety)
and element name and ID values never clash.

opts isn't a good name for the variable, it actually refers to a
select element so:

  var select = document.forms['f'].elements['drink'];

Or, since you use f multiple times:

  var f =  document.forms['f'];
  var select = f.elements['drink'];


>                 drinkbase=f.drink[opts.selectedIndex].value;

The selectedIndex trick is not necessary since Netscape 4 (if I
remember correctly), I think  it is safe now to use:

  drinkbase = select.value;

provided all options have a value.  Note that IE again doesn't follow
the spec here and if the option doesn't have a value attribute,
accessing the DOM property it wont' return the text content like it
should.

And you may want to declare drinkbase at the same place you first use
it.  Just a bit neater (to me).


>                 var sizefactor;
>                 var i;
>
>                         for (i=0; i<f.sizef.length; i++){

Here you are looking up f.sizef.length multiple times when once would
do (it won't make any difference to performance here but is a good
habit to get into).  Similarly with the radio button collection.  It
also allows a shorter version to be used, though it will go through
the radio buttons in reverse order:

  var radios = f.sizef;
  var i = radios.length;
  while (i--) {


>                                 if (f.sizef[i].checked) {

    if (radios[i].checked) {


>                                 sizefactor=f.sizef[i].value; break;}

      sizefactor = raodios[i].value;


>                                 }
>                         total=sizefactor*drinkbase;
>
>                         total=total*(1+taxrate);

You may want to read the following sections of the FAQ:

"5.1 How do I format a Number as a String with exactly 2 decimal
places? "
<URL: http://www.jibbering.com/faq/#formatNumber >

"5.2 Why does simple decimal arithmetic give strange results?"
<URL: http://www.jibbering.com/faq/#binaryNumbers >


>                         f.label.value="Total with tax";
>                         f.totalf.value="total";

Here you want to set the value of the input to the value of the total
variable, not the literal string "total".

    f.totalf.value = total;


>                         return=false;

That is an incorrect return statement, you can't assign a value to
return, I think you meant:

    return false;

That will stop your form from submitting always, it is usual to return
false only if you want to cancel the submit, otherwise submit some
other value (undefined is OK but you might want to explicitly return
true for clarity sake).


--
Rob
0
RobG
3/23/2009 1:06:26 AM
On Mar 22, 8:06=A0pm, RobG <rg...@iinet.net.au> wrote:
> On Mar 23, 9:22 am, meh <mscomptc...@gmail.com> wrote:
>
> > I am learning javascript from a book.
>
> Which book? =A0It's always good to say which one - most are very
> ordinary (or worse), those worth having as references are included in
> the FAQ:
>
> "3.1 What books are recommended for javascript?"
> <URL:http://www.jibbering.com/faq/#books>
>
> > I admit it is not the easiest or
> > best way, but I wanted to learn and I had the books purchased from
> > awhile back. I have some familiarity with C and HTML and wanted to
> > expand my programming base. I have tried two of the programs in this
> > book and they worked fine. Now on the third one I can't seem to get it
> > to work. I know it is probably something simple but could you give it
> > a look and steer me in the right direction?
> > Here is the code the Script and HTML commands are commented out. I
> > thought is was suppose to return a total value.
>
> > <!--ml>
>
> No need to be coy with tag names, just post the markup.
>
> > =A0 =A0 =A0 =A0 <head>
> > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 <TITLE> Coffee Shop menu </TITLE>
>
> > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 <!--ipt language=3D"javascript">
>
> The language attribute has been deprecated for quite some time, the
> type attribute is required.
>
> <script type=3D"text/javascript">
>
> > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 function addup(){
> > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 var total;
> > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 var drinkbase;
> > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 var taxrate=3D.08 ;
> > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 var opts=3Df.drink;
>
> The assignment here depends on an IE feature where the name and id
> attributes of HTML elements are added as global variables (the
> variable f). =A0It must have seemed like a good idea at the time to IE's
> developers, but has proven to be a serious inconvenience. =A0The simple
> solution is to ensure global variables (or any variable for safety)
> and element name and ID values never clash.
>
> opts isn't a good name for the variable, it actually refers to a
> select element so:
>
> =A0 var select =3D document.forms['f'].elements['drink'];
>
> Or, since you use f multiple times:
>
> =A0 var f =3D =A0document.forms['f'];
> =A0 var select =3D f.elements['drink'];
>
> > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 drinkbase=3Df.drink[opts.selectedIndex]=
..value;
>
> The selectedIndex trick is not necessary since Netscape 4 (if I
> remember correctly), I think =A0it is safe now to use:
>
> =A0 drinkbase =3D select.value;
>
> provided all options have a value. =A0Note that IE again doesn't follow
> the spec here and if the option doesn't have a value attribute,
> accessing the DOM property it wont' return the text content like it
> should.
>
> And you may want to declare drinkbase at the same place you first use
> it. =A0Just a bit neater (to me).
>
> > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 var sizefactor;
> > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 var i;
>
> > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 for (i=3D0; i<f.sizef.l=
ength; i++){
>
> Here you are looking up f.sizef.length multiple times when once would
> do (it won't make any difference to performance here but is a good
> habit to get into). =A0Similarly with the radio button collection. =A0It
> also allows a shorter version to be used, though it will go through
> the radio buttons in reverse order:
>
> =A0 var radios =3D f.sizef;
> =A0 var i =3D radios.length;
> =A0 while (i--) {
>
> > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 if (f.s=
izef[i].checked) {
>
> =A0 =A0 if (radios[i].checked) {
>
> > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 sizefac=
tor=3Df.sizef[i].value; break;}
>
> =A0 =A0 =A0 sizefactor =3D raodios[i].value;
>
> > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 }
> > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 total=3Dsizefactor*drin=
kbase;
>
> > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 total=3Dtotal*(1+taxrat=
e);
>
> You may want to read the following sections of the FAQ:
>
> "5.1 How do I format a Number as a String with exactly 2 decimal
> places? "
> <URL:http://www.jibbering.com/faq/#formatNumber>
>
> "5.2 Why does simple decimal arithmetic give strange results?"
> <URL:http://www.jibbering.com/faq/#binaryNumbers>
>
> > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 f.label.value=3D"Total =
with tax";
> > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 f.totalf.value=3D"total=
";
>
> Here you want to set the value of the input to the value of the total
> variable, not the literal string "total".
>
> =A0 =A0 f.totalf.value =3D total;
>
> > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 return=3Dfalse;
>
> That is an incorrect return statement, you can't assign a value to
> return, I think you meant:
>
> =A0 =A0 return false;
>
> That will stop your form from submitting always, it is usual to return
> false only if you want to cancel the submit, otherwise submit some
> other value (undefined is OK but you might want to explicitly return
> true for clarity sake).
>
> --
> Rob

This is great. Thanks. I have already downloaded the ECMA standard.
Thanks for the link and the extra help. I will work on it. The Book is
"Beginning Scripting through game programming". I see where the book
by Powell is recommended and I think I will switch to it.
0
meh
3/23/2009 2:22:39 AM
On Mar 22, 9:22=A0pm, meh <mscomptc...@gmail.com> wrote:
> On Mar 22, 8:06=A0pm, RobG <rg...@iinet.net.au> wrote:
>
>
>
>
>
> > On Mar 23, 9:22 am, meh <mscomptc...@gmail.com> wrote:
>
> > > I am learning javascript from a book.
>
> > Which book? =A0It's always good to say which one - most are very
> > ordinary (or worse), those worth having as references are included in
> > the FAQ:
>
> > "3.1 What books are recommended for javascript?"
> > <URL:http://www.jibbering.com/faq/#books>
>
> > > I admit it is not the easiest or
> > > best way, but I wanted to learn and I had the books purchased from
> > > awhile back. I have some familiarity with C and HTML and wanted to
> > > expand my programming base. I have tried two of the programs in this
> > > book and they worked fine. Now on the third one I can't seem to get i=
t
> > > to work. I know it is probably something simple but could you give it
> > > a look and steer me in the right direction?
> > > Here is the code the Script and HTML commands are commented out. I
> > > thought is was suppose to return a total value.
>
> > > <!--ml>
>
> > No need to be coy with tag names, just post the markup.
>
> > > =A0 =A0 =A0 =A0 <head>
> > > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 <TITLE> Coffee Shop menu </TITLE>
>
> > > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 <!--ipt language=3D"javascript">
>
> > The language attribute has been deprecated for quite some time, the
> > type attribute is required.
>
> > <script type=3D"text/javascript">
>
> > > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 function addup(){
> > > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 var total;
> > > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 var drinkbase;
> > > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 var taxrate=3D.08 ;
> > > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 var opts=3Df.drink;
>
> > The assignment here depends on an IE feature where the name and id
> > attributes of HTML elements are added as global variables (the
> > variable f). =A0It must have seemed like a good idea at the time to IE'=
s
> > developers, but has proven to be a serious inconvenience. =A0The simple
> > solution is to ensure global variables (or any variable for safety)
> > and element name and ID values never clash.
>
> > opts isn't a good name for the variable, it actually refers to a
> > select element so:
>
> > =A0 var select =3D document.forms['f'].elements['drink'];
>
> > Or, since you use f multiple times:
>
> > =A0 var f =3D =A0document.forms['f'];
> > =A0 var select =3D f.elements['drink'];
>
> > > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 drinkbase=3Df.drink[opts.selectedInde=
x].value;
>
> > The selectedIndex trick is not necessary since Netscape 4 (if I
> > remember correctly), I think =A0it is safe now to use:
>
> > =A0 drinkbase =3D select.value;
>
> > provided all options have a value. =A0Note that IE again doesn't follow
> > the spec here and if the option doesn't have a value attribute,
> > accessing the DOM property it wont' return the text content like it
> > should.
>
> > And you may want to declare drinkbase at the same place you first use
> > it. =A0Just a bit neater (to me).
>
> > > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 var sizefactor;
> > > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 var i;
>
> > > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 for (i=3D0; i<f.sizef=
..length; i++){
>
> > Here you are looking up f.sizef.length multiple times when once would
> > do (it won't make any difference to performance here but is a good
> > habit to get into). =A0Similarly with the radio button collection. =A0I=
t
> > also allows a shorter version to be used, though it will go through
> > the radio buttons in reverse order:
>
> > =A0 var radios =3D f.sizef;
> > =A0 var i =3D radios.length;
> > =A0 while (i--) {
>
> > > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 if (f=
..sizef[i].checked) {
>
> > =A0 =A0 if (radios[i].checked) {
>
> > > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 sizef=
actor=3Df.sizef[i].value; break;}
>
> > =A0 =A0 =A0 sizefactor =3D raodios[i].value;
>
> > > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 }
> > > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 total=3Dsizefactor*dr=
inkbase;
>
> > > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 total=3Dtotal*(1+taxr=
ate);
>
> > You may want to read the following sections of the FAQ:
>
> > "5.1 How do I format a Number as a String with exactly 2 decimal
> > places? "
> > <URL:http://www.jibbering.com/faq/#formatNumber>
>
> > "5.2 Why does simple decimal arithmetic give strange results?"
> > <URL:http://www.jibbering.com/faq/#binaryNumbers>
>
> > > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 f.label.value=3D"Tota=
l with tax";
> > > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 f.totalf.value=3D"tot=
al";
>
> > Here you want to set the value of the input to the value of the total
> > variable, not the literal string "total".
>
> > =A0 =A0 f.totalf.value =3D total;
>
> > > =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 =A0 return=3Dfalse;
>
> > That is an incorrect return statement, you can't assign a value to
> > return, I think you meant:
>
> > =A0 =A0 return false;
>
> > That will stop your form from submitting always, it is usual to return
> > false only if you want to cancel the submit, otherwise submit some
> > other value (undefined is OK but you might want to explicitly return
> > true for clarity sake).
>
> > --
> > Rob
>
> This is great. Thanks. I have already downloaded the ECMA standard.
> Thanks for the link and the extra help. I will work on it. The Book is
> "Beginning Scripting through game programming". I see where the book
> by Powell is recommended and I think I will switch to it.- Hide quoted te=
xt -
>
> - Show quoted text -

I made the changes and now I get a NAN for total. Does that mean that
the numbers in the value positions are being read as text?
0
meh
3/25/2009 4:12:24 AM
On Mar 25, 2:12=A0pm, meh <mscomptc...@gmail.com> wrote:
[...]
> I made the changes and now I get a NAN for total. Does that mean that
> the numbers in the value positions are being read as text?

Unlikely, that may cause an incorrect result, but not NaN (unless the
text entered doesn't convert to a number).

Please trim your quotes to just the relevant parts. If you don't post
your modified code, I can't see it so can't comment.

--
Rob
0
RobG
3/25/2009 8:21:48 AM
Reply: