So I have a 4x3 matrix where the red or blue squares are links. When I click on the links, I want to get the ID of the links, however, I get this error on line 63: TypeError: Result of expression 'targ' [undefined] is not an object. I am using code based on this http://www.quirksmode.org/js/events_properties.html#target
Heres a live example: https://dl.dropbox.com/u/750932/iPhone/risk.html
<!DOCTYPE html>
<html>
<head>
<title>RISK</title>
<style type="text/css" media="screen">
a:link, a:visited {color: #eee;border:3px solid #ccc;display:inline-block;margin:3px;text-decoration:none;padding:26px;}
.blank {background:#fff;}
.one {background: #7B3B3B;}
.two {background: #547980;}
#status {color: #eee;padding:1px;text-align:center}
#error {background:#FFD41F;}
.current {border:3px solid #000;}
p {margin:0 0 15px;padding:0;}
input {height:40px;width:90px;}
</style>
<script type="text/javascript" charset="utf-8">
var playerOne = true;
var gameOver = false;
function newGame()
{
var status = document.getElementById('status');
var one = 0;
var two = 0;
gameOver = false;
playerOne = true;
status.innerHTML = 'Player One\'s turn';
status.setAttribute('class', 'one');
var board = [1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2];
// shuffle the array
for(var j, x, i = board.length; i; j = parseInt(Math.random() * i),
x = board[--i], board[i] = board[j], board[j] = x);
var row = -1;
for (var i = 0; i < board.length; i++) {
var cssClass = board[i] == 1 ? 'one' : 'two';
var col = i % 4;
if (col == 0) row++;
document.getElementById('a' + col + '_' + row).setAttribute('class', cssClass);
}
for(var x = 0; x < 4; x++)
{
for(var y = 0; y < 3; y++)
{
document.getElementById('a' + x + '_' + y).innerHTML = Math.floor(Math.random()*5 + 1);
}
}
}
function current(e)
{
var value = e.innerHTML;
var cssClass = e.getAttribute('class');
var targ;
if (!e)
var e = window.event;
if (e.target)
targ = e.target;
else if (e.srcElement)
targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
var theID = targ.id;
if (cssClass == 'one' && playerOne == true)
{
alert('you choose your square' + theID);
}
else if (cssClass == 'two' && playerOne == false)
{
alert('player 2 choose correct square' + theID);
}
else
alert('ERROR: you didnt your square');
}
function nextTurn()
{
if (playerOne == true)
playerOne = false;
else
playerOne = true;
var status = document.getElementById('status');
if (playerOne == true)
{
status.innerHTML = 'Player One\'s turn';
status.setAttribute('class', 'one box');
}
else
{
status.innerHTML = 'Player Two\'s turn';
status.setAttribute('class', 'two box');
}
}
</script>
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body onload='newGame();'>
<p id="status" class="one">Player One's turn</p>
<a href="#" id="a0_0" class="blank" onclick="current();"></a>
<a href="#" id="a1_0" class="blank" onclick="current(this);"></a>
<a href="#" id="a2_0" class="blank" onclick="current(this);"></a>
<a href="#" id="a3_0" class="blank" onclick="current(this);"></a>
<br />
<a href="#" id="a0_1" class="blank" onclick="current(this);"></a>
<a href="#" id="a1_1" class="blank" onclick="current(this);"></a>
<a href="#" id="a2_1" class="blank" onclick="current(this);"></a>
<a href="#" id="a3_1" class="blank" onclick="current(this);"></a>
<br />
<a href="#" id="a0_2" class="blank" onclick="current(this);"></a>
<a href="#" id="a1_2" class="blank" onclick="current(this);"></a>
<a href="#" id="a2_2" class="blank" onclick="current(this);"></a>
<a href="#" id="a3_2" class="blank" onclick="current(this);"></a>
<br /><br />
<p><input type="button" id="nextTurn" value="End Turn" onclick="nextTurn();" /></p>
<p><input type="button" id="newgame" value="New Game" onclick="newGame();" /></p>
</body>
</html>