JavaScript Question

For all coding issues - MODers and programmers, HTML and more.

Moderators: Jeff250, fliptw

Post Reply
Resilient
DBB Ace
DBB Ace
Posts: 33
Joined: Wed May 05, 2004 11:03 am
Location: PA, USA
Contact:

JavaScript Question

Post by Resilient »

I was messing around with some JavaScript stuff to see if I could do something but ran into a small problem. I need to call a function when you click on an image. I know I need to use onClick="myFunction()" but it's not working. Maybe I'm putting the onClick in the wrong place?

I started out doing it like this:

Code: Select all

<img src="picture.gif" onClick="myFunction()">
After that didn't work, I tried this:

Code: Select all

<a href="#" onClick="myFunction()"><img src="picture.gif" border="0"></a>
Still no success. What am I doing wrong? I feel dumb now. :P
User avatar
SuperSheep
DBB Benefactor
DBB Benefactor
Posts: 935
Joined: Sun Jun 03, 2001 2:01 am
Location: Illinois

Post by SuperSheep »

Calling a function in the IMG tag should work just fine but without seeing the whole HTML page, couldn't really tell ya. Might be good to mention which browser you are using too.
Resilient
DBB Ace
DBB Ace
Posts: 33
Joined: Wed May 05, 2004 11:03 am
Location: PA, USA
Contact:

Post by Resilient »

Basically, I was trying to make a simple Tic-Tac-Toe game. I have never really gotten into JavaScript heavily before and thought maybe fooling around with creating a simple game might help. So far, from what I know and what I've learned, the code should work fine.

Anyway, I uploaded the HTML file, you can get to it here.

I am using IE 6 while doing this. Keep in mind this code isn't finished (obviously). I will probably go back and clean it up some once it works properly. Also, the game board isn't the best, I know. Just a 3x3 table with an image in each cell. :P Right now, I just want to get it working. :) Thanks for taking a look at it!
User avatar
Sergeant Thorne
DBB Material Defender
DBB Material Defender
Posts: 4641
Joined: Sun Nov 25, 2001 3:01 am
Location: Indiana, U.S.A.

Post by Sergeant Thorne »

Try moving all functions that contain references to HTML objects down below the HTML code for the objects themselves.
Example:
function NewBoard()
{
for(i=0;i<9;i++)
{
board = -1 // Set all squares to unowned.
document.images.src = "empty.gif" // Replace any X's and O's with
// a blank space.
}
turn = 0 // Player 0 (X) can now move.
moves = 0 // We've had 0 moves taken so far. (imagine that!)
}

If these objects don't yet exist when your browser is parsing the JavaScript, it'll give you a problem.
Resilient
DBB Ace
DBB Ace
Posts: 33
Joined: Wed May 05, 2004 11:03 am
Location: PA, USA
Contact:

Post by Resilient »

Nope, that wasn't the problem. I found it. In the TestForGameOver function, I had single equal signs where there should've been double (comparison, not assignment). It was enough to throw everything off. Once I added the extra '=' where necessary, everything ran smoothly. :)

The new HTML file is uploaded for anyone who would like to try it.
User avatar
Sergeant Thorne
DBB Material Defender
DBB Material Defender
Posts: 4641
Joined: Sun Nov 25, 2001 3:01 am
Location: Indiana, U.S.A.

Post by Sergeant Thorne »

I wonder if the variables in square brackets after ".images" are enough to make this work despite what I've already stated.. either that or I'm all wet. :P "A few more tests..." -Willy Wonka

Very cool Tic-Tac-Toe game!
User avatar
SuperSheep
DBB Benefactor
DBB Benefactor
Posts: 935
Joined: Sun Jun 03, 2001 2:01 am
Location: Illinois

Post by SuperSheep »

Cool! :) Glad to hear you got it working.

I do have a few recommendations however. The < script > portion should be placed within the HTML tag, something like this,

< html >
< head >
< title >Tic Tac Toe< /title >
< /head >
< script >
...
< /script >
< body >
...
< /body >
< /html >

Also, I noticed, the HTML looks to be IE specific. I don't know if this is what you want, but you might want to look at implementing some kind of browser detection script and different versions for IE, Netscrape, etc.,.

Lastly, I don't think you need the < form > tags as you aren't actually using it. Try removing the < form > tags and see if the code still works, I'll bet it does.

Other than that, very cool!
User avatar
SuperSheep
DBB Benefactor
DBB Benefactor
Posts: 935
Joined: Sun Jun 03, 2001 2:01 am
Location: Illinois

Post by SuperSheep »

Almost forgot, in reference to what Sgt. Thorne said, add defer to your script tag like this...
< script defer language="JavaScript" >

This will force the script to be "deferred" until it is called.

And also, don't mind the spaces in between the < and the tag name, I'm doing that just so it doesn't get mangled in the post.
User avatar
Sergeant Thorne
DBB Material Defender
DBB Material Defender
Posts: 4641
Joined: Sun Nov 25, 2001 3:01 am
Location: Indiana, U.S.A.

Post by Sergeant Thorne »

Actually, it wouldn't be effected in this PHPBB.
User avatar
Sergeant Thorne
DBB Material Defender
DBB Material Defender
Posts: 4641
Joined: Sun Nov 25, 2001 3:01 am
Location: Indiana, U.S.A.

Post by Sergeant Thorne »

I see that you've done some more work on it--looking nice. Now all you need is to have it preload your "X" and "O" images, so that there won't be any pause when the first game starts. :idea:
In case you're not familiar with it, here's how:
Create two new "Image()" objects--one for each picture--and set their "src" properties to the image addresses; this causes the browser to load the images into the user's internet cache when their browser first loads the page, even though they don't see the two image objects you've created; when they click on it, *bam*--it loads instantly from the cache!
Resilient
DBB Ace
DBB Ace
Posts: 33
Joined: Wed May 05, 2004 11:03 am
Location: PA, USA
Contact:

Post by Resilient »

The reason for the form was to create the New Game and Reset Wins buttons, along with the boxes to hold the X and O wins. I could replace the buttons with clickable images, but I still need a way to display the wins. I know of one way but it will take a lot of (probably unnecessary) work.

Never heard of "defer". lol ... Something new for me to go read up on. :)

Yeah, I was planning on preloading the images, as well as making better looking ones. These are all things I like to finish last, once I get everything working. :)

It's too bad, to the best of my knowledge, that JS doesn't have a way to let you make a multiplayer (network) game. Once I saw that I could make Tic-Tac-Toe, I started getting the idea of making a Risk game. Now that would be cool! :D
User avatar
MehYam
DBB Head Flapper
DBB Head Flapper
Posts: 2184
Joined: Thu Nov 05, 1998 12:01 pm
Location: Mountain View, CA, USA
Contact:

Post by MehYam »

Thread hijack: Here's a version of Tetris I wrote in DHTML a couple years ago. It tries to be object oriented - maybe the source will help ya.
Resilient
DBB Ace
DBB Ace
Posts: 33
Joined: Wed May 05, 2004 11:03 am
Location: PA, USA
Contact:

Post by Resilient »

Cool Tetris game!! But how do you rotate the pieces? (I guess I could look at the code and find out. lol)
User avatar
DCrazy
DBB Alumni
DBB Alumni
Posts: 8826
Joined: Wed Mar 15, 2000 3:01 am
Location: Seattle

Post by DCrazy »

Mehyam, how do I start the game going? Mozilla6/WinXP.

And don't be too worried about thread hijackings, I can always split the topic if it gets too big. :)
User avatar
MehYam
DBB Head Flapper
DBB Head Flapper
Posts: 2184
Joined: Thu Nov 05, 1998 12:01 pm
Location: Mountain View, CA, USA
Contact:

Post by MehYam »

You drink the Kool-aid at Microsoft and view the page with IE. ;)
But how do you rotate the pieces?
Check the onkeydown handler of the BODY element, it all starts there.

The "sorta" object-orientedness of the program is in that I've created objects in Javascript - so you'll see things like "piece.Rotate()".

EDIT: oh - were just asking about controls? If so, up arrow rotates, down arrows speeds the pieces up.
Post Reply