Defining forms?

Andy B

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

I have deleted some pointless HTML code from the beginning

<script type="text/JavaScript">

</script>
<center><table class="content">
<tr>
<td class="innerContent"><table width="300" border="0" cellspacing="1"
cellpadding="1"
height="300">
<tr>
<td><A border='0' href="javascript:Clicked('1')"><img border='0'
name="image" src="images/1.gif"></A></td>
<td><A border='0' href="javascript:Clicked('2')"><img border='0'
name="image" src="images/2.gif"></A></td>
<td><A border='0' href="javascript:Clicked('3')"><img border='0'
name="image" src="images/3.gif"></A></td>
</tr>
<tr>
<td><A border='0' href="javascript:Clicked('4')"><img border='0'
name="image" src="images/4.gif"></A></td>
<td><A border='0' href="javascript:Clicked('5')"><img border='0'
name="image" src="images/5.gif"></A></td>
<td><A border='0' href="javascript:Clicked('6')"><img border='0'
name="image" src="images/6.gif"></A></td>
</tr>
<tr>
<td><A border='0' href="javascript:Clicked('7')"><img border='0'
name="image" src="images/7.gif"></A></td>
<td><A border='0' href="javascript:Clicked('8')"><img border='0'
name="image" src="images/8.gif"></A></td>
<td><A border='0' href="javascript:Clicked('9')"><img border='0'
name="image" src="images/Blank.gif"></A></td>
</tr>
</table>
<p>
<input type='button' type='button' name='startButton' value='Start
Game!' OnMouseDown='javascript:Shuffle()'>
<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%"><font color="#FFFFFF" size="3" face="Verdana, Arial,
Helvetica,
sans-serif">The
completed picture looks like this: </font></td>
<td width="28%"><font face="Verdana, Arial, Helvetica,
sans-serif"><img
src="Images/Complete.gif" width="200" height="200" border="2"></font></td>
</tr>
</table>
<p> </p></body>
</html>

Jul 20 '05 #1

Subscribe Post Reply

1570

Michael Winter

On Tue, 10 Feb 2004 18:04:34 -0000, Andy B <No Spam Thanks> wrote:

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.
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.
<A border='0' href="javascript:Clicked('1')"><img border='0'
name="image" src="images/1.gif"></A>
1) Don't use the JavaScript pseudo-protocol (javascript:) without a good
reason. You can do the above with either of:

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

or:

<img src="images/1.gif" alt="short description" onclick="Clicked('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(NumClicked) {
...
if (NumClicked == 1 && image[1].src == GamePics[8].src)
Swap(0,1);

Choose one or the other.

if (NumClicked == 1 && image[1].src == GamePics[8].src)
Swap(0,1);
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.
<input type='button' type='button' name='startButton' value='Start
Game!' OnMouseDown='javascript:Shuffle()'>
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">
<script type="text/JavaScript">
<!--

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.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

Jul 20 '05 #2

Lee

Andy B said:

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

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.

Jul 20 '05 #3

Andy B

"Michael Winter" <M.******@blueyonder.co.invalid> wrote in message
news:op**************@news-text.blueyonder.co.uk...

On Tue, 10 Feb 2004 18:04:34 -0000, Andy B <No Spam Thanks> wrote:
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.
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.
<A border='0' href="javascript:Clicked('1')"><img border='0'
name="image" src="images/1.gif"></A>

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

<a href="" onclick="Clicked('1'); return false;"><img

src="images/1.gif" alt="short description"></a>

or:

<img src="images/1.gif" alt="short description" onclick="Clicked('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(NumClicked) {
...
if (NumClicked == 1 && image[1].src == GamePics[8].src)
Swap(0,1);

Choose one or the other.

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

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.
<input type='button' type='button' name='startButton' value='Start
Game!' OnMouseDown='javascript:Shuffle()'>

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">
<script type="text/JavaScript">
<!--

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.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

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

Jul 20 '05 #4

McKirahan

"Andy B" <No Spam Thanks> wrote in message
news:40***********************@lovejoy.zen.co.uk.. .

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.

Try this:

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

</script>
</head>
<body bgcolor="#000000">
<center>
<table class="content">
<tr>
<td class="innerContent">
<table width="300" border="0" cellspacing="1" cellpadding="1"
height="300">
<tr>
<td><A border='0' href="javascript:Clicked(1)"><img border='0'
name="image0" src="images/1.gif"></A></td>
<td><A border='0' href="javascript:Clicked(2)"><img border='0'
name="image1" src="images/2.gif"></A></td>
<td><A border='0' href="javascript:Clicked(3)"><img border='0'
name="image2" src="images/3.gif"></A></td>
</tr>
<tr>
<td><A border='0' href="javascript:Clicked(4)"><img border='0'
name="image3" src="images/4.gif"></A></td>
<td><A border='0' href="javascript:Clicked(5)"><img border='0'
name="image4" src="images/5.gif"></A></td>
<td><A border='0' href="javascript:Clicked(6)"><img border='0'
name="image5" src="images/6.gif"></A></td>
</tr>
<tr>
<td><A border='0' href="javascript:Clicked(7)"><img border='0'
name="image6" src="images/7.gif"></A></td>
<td><A border='0' href="javascript:Clicked(8)"><img border='0'
name="image7" src="images/8.gif"></A></td>
<td><A border='0' href="javascript: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='startButton' value='Start
Game!' onclick='Shuffle()'>
<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%"><font color="#FFFFFF" size="3" face="Verdana, Arial,
Helvetica, sans-serif">The completed picture looks like this: </font></td>
<td width="28%"><font 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>

Jul 20 '05 #5

Andy B

"McKirahan" <Ne**@McKirahan.com> wrote in message
news:hzaWb.276356$na.437676@attbi_s04...

"Andy B" <No Spam Thanks> wrote in message
news:40***********************@lovejoy.zen.co.uk.. .
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.

Try this:

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

</script>
</head>
<body bgcolor="#000000">
<center>
<table class="content">
<tr>
<td class="innerContent">
<table width="300" border="0" cellspacing="1" cellpadding="1"
height="300">
<tr>
<td><A border='0' href="javascript:Clicked(1)"><img border='0'
name="image0" src="images/1.gif"></A></td>
<td><A border='0' href="javascript:Clicked(2)"><img border='0'
name="image1" src="images/2.gif"></A></td>
<td><A border='0' href="javascript:Clicked(3)"><img border='0'
name="image2" src="images/3.gif"></A></td>
</tr>
<tr>
<td><A border='0' href="javascript:Clicked(4)"><img border='0'
name="image3" src="images/4.gif"></A></td>
<td><A border='0' href="javascript:Clicked(5)"><img border='0'
name="image4" src="images/5.gif"></A></td>
<td><A border='0' href="javascript:Clicked(6)"><img border='0'
name="image5" src="images/6.gif"></A></td>
</tr>
<tr>
<td><A border='0' href="javascript:Clicked(7)"><img border='0'
name="image6" src="images/7.gif"></A></td>
<td><A border='0' href="javascript:Clicked(8)"><img border='0'
name="image7" src="images/8.gif"></A></td>
<td><A border='0' href="javascript: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='startButton' value='Start
Game!' onclick='Shuffle()'>
<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%"><font color="#FFFFFF" size="3" face="Verdana,

Arial, Helvetica, sans-serif">The completed picture looks like this: </font></td>
<td width="28%"><font 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>

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

Jul 20 '05 #6

Brian Genisio

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.

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

Jul 20 '05 #7

Richard Cornford

"McKirahan" <Ne**@McKirahan.com> wrote in message
news:hzaWb.276356$na.437676@attbi_s04...
<snip>

function Swap(Pic1, Pic2) {
var imag1 = eval("document.image" + Pic1);
var imag2 = eval("document.image" + Pic2);

<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.

Jul 20 '05 #8

McKirahan

"Richard Cornford" <Ri*****@litotes.demon.co.uk> wrote in message
news:c0*******************@news.demon.co.uk...

"McKirahan" <Ne**@McKirahan.com> wrote in message
news:hzaWb.276356$na.437676@attbi_s04...
<snip>
function Swap(Pic1, Pic2) {
var imag1 = eval("document.image" + Pic1);
var imag2 = eval("document.image" + Pic2);

<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.

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.

Jul 20 '05 #9

Dr John Stockton

JRS: In article <40***********************@lovejoy.zen.co.uk>, seen in
news:comp.lang.javascript, Andy B <No@Spam.Thanks> posted at Tue, 10 Feb
2004 18:04:34 :-

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

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.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

Jul 20 '05 #10

Bas Cost Budde

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

Jul 20 '05 #11

Similar topics