JavaScript Question

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

[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]

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. Right now, I just want to get it working. Thanks for taking a look at it!

[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]

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.

[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. "A few more tests..." -Willy Wonka

Very cool Tic-Tac-Toe game!

[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!

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

[Sergeant Thorne]

Actually, it wouldn't be effected in this PHPBB.

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

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!

[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]

Cool Tetris game!! But how do you rotate the pieces? (I guess I could look at the code and find out. lol)

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

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