Hi, I'm creating a tic tac toe game using html/css/javascript. Unfortunately, I'm stuck. I've fully created the html/css/javascript but I can't seem to make it run. There must be a problem somewhere and I can't figure it out. I'm new to javascript. If anyone could help me out, that would be great. Thanks in advance.

-freshofftheboat




HTML
---------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Tic-Tac-Toe</title>
<link rel="stylesheet" href="css/layout.css" />
<script type="text/javascript" src="js/tictactoe.js"></script>
</head>

<body>
<div id="layout">
<div id="square0" onclick="handleClick(this)"><img id="img0" src="img/blank.jpg"/></div>
<div id="square1" onclick="handleClick(this)"><img id="img1" src="img/blank.jpg"/></div>
<div id="square2" onclick="handleClick(this)"><img id="img2" src="img/blank.jpg"/></div>
<div id="square3" onclick="handleClick(this)"><img id="img3" src="img/blank.jpg"/></div>
<div id="square4" onclick="handleClick(this)"><img id="img4" src="img/blank.jpg"/></div>
<div id="square5" onclick="handleClick(this)"><img id="img5" src="img/blank.jpg"/></div>
<div id="square6" onclick="handleClick(this)"><img id="img6" src="img/blank.jpg"/></div>
<div id="square7" onclick="handleClick(this)"><img id="img7" src="img/blank.jpg"/></div>
<div id="square8" onclick="handleClick(this)"><img id="img8" src="img/blank.jpg"/></div>
</div>


<span>Player x:</span> <label id="xScore">0</label>
<br />
<span>Player o:</span> <label id="oScore">0</label>
<br />
<span>Draws:</span> <label id="ties">0</label>
<br /><br />
<input type="button" value="New Game" onclick="newGame()" />
<input type="button" value="Reset" onclick="playAgain()" />
</body>
</html>


CSS
-------

@charset "utf-8";
/* CSS Document */

/*change this part*/
body{
font-family: Verdana, Tahoma, Arial, sans-serif;font-size: 62.5%;
color: #000;background-color: #fff;text-align: center;
}


#layout{
margin: 50px ;
width: 600px;
height: 600px;}

#layout div{
float: left;
border: solid 1px #000;
width: 150px;
height: 150px;
}
/*remove borders to form tictactoegrid*/
#layout div#square0{border-top:0; border-left:0;}
#layout div#square1{border-top:0;}
#layout div#square2{border-top:0; border-right:0}
#layout div#square3{border-left:0;}
#layout div#square5{border-right:0;}
#layout div#square6{border-left:0; border-bottom:0;}
#layout div#square7{border-bottom:0;}
#layout div#square8{border-right:0; border-bottom:0;}

Javascript
-------------


// JavaScript Document

var currentPlayer = "o";
var i;
var numTurns = 0;
var o = false;
var oWins = 0;
var playAgain;
var squares = new Array(9);
var ties = 0;
var x = false;
var xWins = 0;

function handleClick(){
if(squares[parseInt(this.id.substring(3)) - 1] == null){
trackTurns();
placeXO(this);
winCombos();
}
}

function newGame(){
var o = confirm("Are you SURE you want \nto start a new game?");
if(o==true){
playAgain();
}
else{
alert('Bye Bye!');
}
}

function placeXO(img) {
if(currentPlayer == "x"){
var o = confirm("Confirm spot?");
if(o==true){
document.getElementById(img.id).setAttribute("src", "img/X.jpg");
}
else{
alert('Choose another spot.');
}

}
else{
var o = confirm("Confirm spot?");
if(o==true){
document.getElementById(img.id).setAttribute("src", "img/O.jpg");
}
else{
alert('Choose another spot.');
}

}
squares[parseInt(img.id.substring(3)) - 1] = currentPlayer;
}

function playAgain(){
for(i = 1; i<10; i++){
document.getElementById("box" + i).src="img/blank.jpg";
squares[i-1] = null;
}
numTurns = 0;
currentPlayer = "o";
}

function trackTurns() {
if (currentPlayer == "x"){
currentPlayer = "o";
}
else{
currentPlayer = "x";
}
}

function winCombos(){
numTurns++;
if(
((squares[0] == "x") && (squares[1] =="x") && (squares[2] == "x")) ||
((squares[3] == "x") && (squares[4] =="x") && (squares[5] == "x")) ||
((squares[6] == "x") && (squares[7] =="x") && (squares[8] == "x")) ||

((squares[0] == "x") && (squares[3] =="x") && (squares[6] == "x")) ||
((squares[1] == "x") && (squares[4] =="x") && (squares[7] == "x")) ||
((squares[2] == "x") && (squares[5] =="x") && (squares[8] == "x")) ||

((squares[0] == "x") && (squares[4] =="x") && (squares[8] == "x")) ||
((squares[2] == "x") && (squares[4] =="x") && (squares[6] == "x")) )
{
xWins++;
document.getElementById('xScore').innerHTML = xWins;
var x = confirm('X Wins! \nPlay Again?');
if(x==true){
playAgain();
}
else{
alert('Bye Bye!');
}
}
else if(
((squares[0] == "o") && (squares[1] =="o") && (squares[2] == "o")) ||
((squares[3] == "o") && (squares[4] =="o") && (squares[5] == "o")) ||
((squares[6] == "o") && (squares[7] =="o") && (squares[8] == "o")) ||

((squares[0] == "o") && (squares[3] =="o") && (squares[6] == "o")) ||
((squares[1] == "o") && (squares[4] =="o") && (squares[7] == "o")) ||
((squares[2] == "o") && (squares[5] =="o") && (squares[8] == "o")) ||

((squares[0] == "o") && (squares[4] =="o") && (squares[8] == "o")) ||
((squares[2] == "o") && (squares[4] =="o") && (squares[6] == "o")) )
{
oWins++;
document.getElementById('oScore').innerHTML = oWins;
var o = confirm('O Wins! \nPlay Again?');
if(o==true){
playAgain();
}
else{
alert('Bye Bye!');
}
}

else if(numTurns == 9){
ties++;
document.getElementById('ties').innerHTML = ties;
var o = confirm("It's a TIE! \nPlay Again?");
if(o==true){
playAgain();
}
else{
alert('Bye Bye!');
}
}
}

window.onload = function(){
//loads when window opens, put even handlers inside ex: onclick, onmouseover, onmouseout
alert('x starts!');
for(i = 1; i<10; i++){
document.getElementById("box" + i).onclick = handleClick;
}
document.getElementById("newGame").onclick = newGame;
}