Defining forms?

**Michael Winter** · Jul 20 '05, 02:25 PM

Re: Defining forms?

On Tue, 10 Feb 2004 18:04:34 -0000, Andy B <No Spam Thanks> wrote:
[color=blue]
> I am very new to JavaScript and my first assignment is to create a simple
> game. Below is my code which works fine in IE, but not in any other
> browser (Opera, Netscape, Mozilla). It has no form defined yet it uses
> form buttons.
> Like I said, it works fine in IE but when loaded into another browser and
> the Start Game! button is clicked, nothing seems to happen. There are no
> error messages apperaing. Any help would be appreciated. Thanks.[/color]

I'll quote sections of your code, then comment on any issues I see. Some
of the comments will be general guidelines only, and won't actually solve
your problem. However, they should still be given some consideration.
[color=blue]
> <A border='0' href="javascrip t:Clicked('1')" ><img border='0'
> name="image" src="images/1.gif"></A>[/color]

1) Don't use the JavaScript pseudo-protocol (javascript:) without a good
reason. You can do the above with either of:

<a href="" onclick="Clicke d('1'); return false;"><img src="images/1.gif"
alt="short description"></a>

or:

<img src="images/1.gif" alt="short description" onclick="Clicke d('1')">

Note that the former should be styled with CSS, and the latter won't work
with NN4.

2) You pass the string, '1', in the call above, but you check against a
number in the function:

function Clicked(NumClic ked) {
...
if (NumClicked == 1 && image[1].src == GamePics[8].src)
Swap(0,1);

Choose one or the other.

[color=blue]
> if (NumClicked == 1 && image[1].src == GamePics[8].src)
> Swap(0,1);[/color]

You use 'image' above as a global variable. However, it is not - it is the
name of several HTML elements. This is where the main issue lies. You can
access the images through the document.images collection. This can be done
either by index (first image in the entire document is 0), or by name. If
you use the latter, you'll have to give each image a unique name.
[color=blue]
> <input type='button' type='button' name='startButt on' value='Start
> Game!' OnMouseDown='ja vascript:Shuffl e()'>[/color]

You probably want to use the onclick intrinsic event, not onmousedown.
Furthermore, prepending "javascript :" to an intrinsic event does not
specify the language in any browser other than IE. The proper way to
acheive this is to use a META element inside the HEAD section:

<meta http-equiv="Content-Script-Type" content="text/javascript">
[color=blue]
> <script type="text/JavaScript">
> <!--[/color]

You don't need to enclose script content with SGML comments. The archaic
reasons for doing so are no longer valid. Also, by convention, MIME types
are written in lowercase, but there shouldn't be any difference (the type
attribute is case insensitive).

Mike

In future, please don't place anything other than your signature, below
the signature marker ("-- ").

--
Michael Winter
M.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

**Lee** · Jul 20 '05, 02:25 PM

Re: Defining forms?

Andy B said:[color=blue]
>
>Hi,
>I am very new to JavaScript and my first assignment is to create a simple
>game. Below is my code which works fine in IE, but not in any other browser
>(Opera, Netscape, Mozilla). It has no form defined yet it uses form buttons.
>Like I said, it works fine in IE but when loaded into another browser and
>the Start Game! button is clicked, nothing seems to happen. There are no
>error messages apperaing. Any help would be appreciated. Thanks.
>--
>To contact me, please use andrewbroomhead {AT} yahoo {DOT} co {DOT} uk[/color]

This is USENET.
To contact you, we respond to your post in the newsgroup.

If you're not seeing error messages in Netscape, then you're not looking
in the right place.

In Netscape 7, use the pulldown menu item:

Tools > Web Development > JavaScript Console

You should see a message complaining that startButton is not defined.
Most browsers don't let you get away with referring to elements
simply by their names, without any context information.

Also note that your method of choosing random numbers doesn't really
work the way you (and possibly your instructor) think it does:
ind=Math.round( 8*Math.random() );
chooses 0 and 8 half as often as any of the other values.

**Andy B** · Jul 20 '05, 02:25 PM

Re: Defining forms?

"Michael Winter" <M.Winter@bluey onder.co.invali d> wrote in message
news:opr254awcg 5vklcq@news-text.blueyonder .co.uk...[color=blue]
> On Tue, 10 Feb 2004 18:04:34 -0000, Andy B <No Spam Thanks> wrote:
>[color=green]
> > I am very new to JavaScript and my first assignment is to create a[/color][/color]
simple[color=blue][color=green]
> > game. Below is my code which works fine in IE, but not in any other
> > browser (Opera, Netscape, Mozilla). It has no form defined yet it uses
> > form buttons.
> > Like I said, it works fine in IE but when loaded into another browser[/color][/color]
and[color=blue][color=green]
> > the Start Game! button is clicked, nothing seems to happen. There are no
> > error messages apperaing. Any help would be appreciated. Thanks.[/color]
>
> I'll quote sections of your code, then comment on any issues I see. Some
> of the comments will be general guidelines only, and won't actually solve
> your problem. However, they should still be given some consideration.
>[color=green]
> > <A border='0' href="javascrip t:Clicked('1')" ><img border='0'
> > name="image" src="images/1.gif"></A>[/color]
>
> 1) Don't use the JavaScript pseudo-protocol (javascript:) without a good
> reason. You can do the above with either of:
>
> <a href="" onclick="Clicke d('1'); return false;"><img[/color]
src="images/1.gif"[color=blue]
> alt="short description"></a>
>
> or:
>
> <img src="images/1.gif" alt="short description" onclick="Clicke d('1')">
>
> Note that the former should be styled with CSS, and the latter won't work
> with NN4.
>
> 2) You pass the string, '1', in the call above, but you check against a
> number in the function:
>
> function Clicked(NumClic ked) {
> ...
> if (NumClicked == 1 && image[1].src == GamePics[8].src)
> Swap(0,1);
>
> Choose one or the other.
>
>[color=green]
> > if (NumClicked == 1 && image[1].src == GamePics[8].src)
> > Swap(0,1);[/color]
>
> You use 'image' above as a global variable. However, it is not - it is the
> name of several HTML elements. This is where the main issue lies. You can
> access the images through the document.images collection. This can be done
> either by index (first image in the entire document is 0), or by name. If
> you use the latter, you'll have to give each image a unique name.
>[color=green]
> > <input type='button' type='button' name='startButt on' value='Start
> > Game!' OnMouseDown='ja vascript:Shuffl e()'>[/color]
>
> You probably want to use the onclick intrinsic event, not onmousedown.
> Furthermore, prepending "javascript :" to an intrinsic event does not
> specify the language in any browser other than IE. The proper way to
> acheive this is to use a META element inside the HEAD section:
>
> <meta http-equiv="Content-Script-Type" content="text/javascript">
>[color=green]
> > <script type="text/JavaScript">
> > <!--[/color]
>
> You don't need to enclose script content with SGML comments. The archaic
> reasons for doing so are no longer valid. Also, by convention, MIME types
> are written in lowercase, but there shouldn't be any difference (the type
> attribute is case insensitive).
>
> Mike
>
> In future, please don't place anything other than your signature, below
> the signature marker ("-- ").
>
> --
> Michael Winter
> M.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)[/color]

Cheers guys, fixed it now and everything is ok.
Thanks very much for the help.
Andy

**McKirahan** · Jul 20 '05, 02:25 PM

Re: Defining forms?

"Andy B" <No Spam Thanks> wrote in message
news:40291d04$0 $15609$fa0fcedb @lovejoy.zen.co .uk...[color=blue]
> Hi,
> I am very new to JavaScript and my first assignment is to create a simple
> game. Below is my code which works fine in IE, but not in any other[/color]
browser[color=blue]
> (Opera, Netscape, Mozilla). It has no form defined yet it uses form[/color]
buttons.[color=blue]
> Like I said, it works fine in IE but when loaded into another browser and
> the Start Game! button is clicked, nothing seems to happen. There are no
> error messages apperaing. Any help would be appreciated. Thanks.[/color]

Try this:

<html>
<head>
<title>Andy_B.h tm</title>
<script type="text/JavaScript">

</script>
</head>
<body bgcolor="#00000 0">
<center>
<table class="content" >
<tr>
<td class="innerCon tent">
<table width="300" border="0" cellspacing="1" cellpadding="1"
height="300">
<tr>
<td><A border='0' href="javascrip t:Clicked(1)">< img border='0'
name="image0" src="images/1.gif"></A></td>
<td><A border='0' href="javascrip t:Clicked(2)">< img border='0'
name="image1" src="images/2.gif"></A></td>
<td><A border='0' href="javascrip t:Clicked(3)">< img border='0'
name="image2" src="images/3.gif"></A></td>
</tr>
<tr>
<td><A border='0' href="javascrip t:Clicked(4)">< img border='0'
name="image3" src="images/4.gif"></A></td>
<td><A border='0' href="javascrip t:Clicked(5)">< img border='0'
name="image4" src="images/5.gif"></A></td>
<td><A border='0' href="javascrip t:Clicked(6)">< img border='0'
name="image5" src="images/6.gif"></A></td>
</tr>
<tr>
<td><A border='0' href="javascrip t:Clicked(7)">< img border='0'
name="image6" src="images/7.gif"></A></td>
<td><A border='0' href="javascrip t:Clicked(8)">< img border='0'
name="image7" src="images/8.gif"></A></td>
<td><A border='0' href="javascrip t:Clicked(9)">< img border='0'
name="image8" src="images/Blank.gif"></A></td>
</tr>
</table>
</td>
</tr>
</table>
<form>
<p>
<input type='button' type='button' name='startButt on' value='Start
Game!' onclick='Shuffl e()'>
<font color="#FFFFFF" size="3" face="Geneva, Arial, Helvetica,
sans-serif">You have taken  
<input class='box' type='text' name='timeTaken ' readonly size='2'
value='0'> seconds</font><br>
</p>
<p>  </p>
<table width="100%" border="0">
<tr>
<td width="72%"><fo nt color="#FFFFFF" size="3" face="Verdana, Arial,
Helvetica, sans-serif">The completed picture looks like this: </font></td>
<td width="28%"><fo nt face="Verdana, Arial, Helvetica,
sans-serif"><img src="Images/Complete.gif" width="200" height="200"
border="2"></font></td>
</tr>
</table>
<p> </p>
</form>
</body>
</html>

**Andy B** · Jul 20 '05, 02:25 PM

Re: Defining forms?

"McKirahan" <News@McKirahan .com> wrote in message
news:hzaWb.2763 56$na.437676@at tbi_s04...[color=blue]
> "Andy B" <No Spam Thanks> wrote in message
> news:40291d04$0 $15609$fa0fcedb @lovejoy.zen.co .uk...[color=green]
> > Hi,
> > I am very new to JavaScript and my first assignment is to create a[/color][/color]
simple[color=blue][color=green]
> > game. Below is my code which works fine in IE, but not in any other[/color]
> browser[color=green]
> > (Opera, Netscape, Mozilla). It has no form defined yet it uses form[/color]
> buttons.[color=green]
> > Like I said, it works fine in IE but when loaded into another browser[/color][/color]
and[color=blue][color=green]
> > the Start Game! button is clicked, nothing seems to happen. There are no
> > error messages apperaing. Any help would be appreciated. Thanks.[/color]
>
> Try this:
>
> <html>
> <head>
> <title>Andy_B.h tm</title>
> <script type="text/JavaScript">
> 
> </script>
> </head>
> <body bgcolor="#00000 0">
> <center>
> <table class="content" >
> <tr>
> <td class="innerCon tent">
> <table width="300" border="0" cellspacing="1" cellpadding="1"
> height="300">
> <tr>
> <td><A border='0' href="javascrip t:Clicked(1)">< img border='0'
> name="image0" src="images/1.gif"></A></td>
> <td><A border='0' href="javascrip t:Clicked(2)">< img border='0'
> name="image1" src="images/2.gif"></A></td>
> <td><A border='0' href="javascrip t:Clicked(3)">< img border='0'
> name="image2" src="images/3.gif"></A></td>
> </tr>
> <tr>
> <td><A border='0' href="javascrip t:Clicked(4)">< img border='0'
> name="image3" src="images/4.gif"></A></td>
> <td><A border='0' href="javascrip t:Clicked(5)">< img border='0'
> name="image4" src="images/5.gif"></A></td>
> <td><A border='0' href="javascrip t:Clicked(6)">< img border='0'
> name="image5" src="images/6.gif"></A></td>
> </tr>
> <tr>
> <td><A border='0' href="javascrip t:Clicked(7)">< img border='0'
> name="image6" src="images/7.gif"></A></td>
> <td><A border='0' href="javascrip t:Clicked(8)">< img border='0'
> name="image7" src="images/8.gif"></A></td>
> <td><A border='0' href="javascrip t:Clicked(9)">< img border='0'
> name="image8" src="images/Blank.gif"></A></td>
> </tr>
> </table>
> </td>
> </tr>
> </table>
> <form>
> <p>
> <input type='button' type='button' name='startButt on' value='Start
> Game!' onclick='Shuffl e()'>
> <font color="#FFFFFF" size="3" face="Geneva, Arial, Helvetica,
> sans-serif">You have taken  
> <input class='box' type='text' name='timeTaken ' readonly size='2'
> value='0'> seconds</font><br>
> </p>
> <p>  </p>
> <table width="100%" border="0">
> <tr>
> <td width="72%"><fo nt color="#FFFFFF" size="3" face="Verdana,[/color]
Arial,[color=blue]
> Helvetica, sans-serif">The completed picture looks like this: </font></td>
> <td width="28%"><fo nt face="Verdana, Arial, Helvetica,
> sans-serif"><img src="Images/Complete.gif" width="200" height="200"
> border="2"></font></td>
> </tr>
> </table>
> <p> </p>
> </form>
> </body>
> </html>
>
>[/color]

Yep, that's what I tried. It was the document.image and document.forms[0]
that I was missing. Thanks to everyone for taking the time to help, it is
really appreciated
Thanks again
Andy

**Brian Genisio** · Jul 20 '05, 02:25 PM

Re: Defining forms?

[color=blue]
> Also note that your method of choosing random numbers doesn't really
> work the way you (and possibly your instructor) think it does:
> ind=Math.round( 8*Math.random() );
> chooses 0 and 8 half as often as any of the other values.
>[/color]

Ah ha! When I first looked at it, I couldnt figure out what you
meant... Then I tried it, and sure enough, you are right.

I understand what the problem is now... only 0 -> 0.049 will evaluate to
0, where 0.05 -> 0.149 will evalutate to 1, and 7.5->7.99 will evalutate
to 8, giving 9 possible values (not 8), where 0 and 8 split the likelyess.

For the OP, here is a more even distribution for your random function:

Math.floor(Math .random() * 8)

This will give values between 0 and 7 (8 values). If you need between 0
and 8 (9 values), change the 8 to a 9.

Brian

**Richard Cornford** · Jul 20 '05, 02:25 PM

Re: Defining forms?

"McKirahan" <News@McKirahan .com> wrote in message
news:hzaWb.2763 56$na.437676@at tbi_s04...
<snip>[color=blue]
>function Swap(Pic1, Pic2) {
> var imag1 = eval("document. image" + Pic1);
> var imag2 = eval("document. image" + Pic2);[/color]
<snip>

It is *never* necessary (or desirable) to construct a dot notation
property accessor as a string and then use - eval - to resolve it. It is
always possible to use a bracket notation property accessor instead, and
doing so is considerably more efficient and reliable in more contexts
(such as environments implementing the ECMAScript compact profile (ECMA
327)). In this case:-

var imag1 = document["image" + Pic1];
var imag2 = document["image" + Pic2];

- are directly equivalent property accessors to the constructed dot
notation versions and as they use a standard language syntax there is no
need to mess around with - eval - to use them.

<URL: http://jibbering.com/faq/#FAQ4_39 >

There are almost no circumstances under with the use of - eval - are
appropriate and generally its use is indicative of a failure to
recognise a much better alternative.

<URL: http://jibbering.com/faq/#FAQ4_40 >

Richard.

**McKirahan** · Jul 20 '05, 02:25 PM

Re: Defining forms?

"Richard Cornford" <Richard@litote s.demon.co.uk> wrote in message
news:c0bggp$jk8 $1$830fa17d@new s.demon.co.uk.. .[color=blue]
> "McKirahan" <News@McKirahan .com> wrote in message
> news:hzaWb.2763 56$na.437676@at tbi_s04...
> <snip>[color=green]
> >function Swap(Pic1, Pic2) {
> > var imag1 = eval("document. image" + Pic1);
> > var imag2 = eval("document. image" + Pic2);[/color]
> <snip>
>
> It is *never* necessary (or desirable) to construct a dot notation
> property accessor as a string and then use - eval - to resolve it. It is
> always possible to use a bracket notation property accessor instead, and
> doing so is considerably more efficient and reliable in more contexts
> (such as environments implementing the ECMAScript compact profile (ECMA
> 327)). In this case:-
>
> var imag1 = document["image" + Pic1];
> var imag2 = document["image" + Pic2];
>
> - are directly equivalent property accessors to the constructed dot
> notation versions and as they use a standard language syntax there is no
> need to mess around with - eval - to use them.
>
> <URL: http://jibbering.com/faq/#FAQ4_39 >
>
> There are almost no circumstances under with the use of - eval - are
> appropriate and generally its use is indicative of a failure to
> recognise a much better alternative.
>
> <URL: http://jibbering.com/faq/#FAQ4_40 >
>
> Richard.[/color]

I knew I was going to catch flack for using eval().

Since you've shown how to use the preferred alternative, I'll sin no more.

**Dr John Stockton** · Jul 20 '05, 02:26 PM

Re: Defining forms?

JRS: In article <40291d04$0$156 09$fa0fcedb@lov ejoy.zen.co.uk> , seen in
news:comp.lang. javascript, Andy B <No@Spam.Thanks > posted at Tue, 10 Feb
2004 18:04:34 :-[color=blue]
>
> if (NumClicked == 1 && image[1].src == GamePics[8].src)
> Swap(0,1);[/color]

and lots more similar. Anything that repetitive should be done with a
function or array.

function Xx(a, b, c, d, e) { // done once
if (NumClicked == a && image[b].src == GamePics[c].src) Swap(d,e) }

Xx(1,1,8,0,1)
...

or

var D = [
[1,1,8,0,1],
...,
[...]]

for (j=0;j<d.length ;j++) { T = D[j]
if (NumClicked == T[0] && image[T[1]].src == GamePics[T[2]].src)
Swap(T[3],T[4]) }

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

**Bas Cost Budde** · Jul 20 '05, 02:28 PM

Re: Defining forms?

Andy B wrote:

[snip huge quote]

Welcome, but consider trimming your quotes. Especially when you say
"thank you" that is often the first thing people like to see ;-) don't
hide it below the quote.

--
Bas Cost Budde

http://www.heuveltop.org/BasCB

but the domain is nl

Defining forms?

Defining forms?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment