Working on a project to develop a dynamic version of the classic game Tic-Tac-Toe...
However...
Every table cell is displaying an irritating flashing cursor, almost like it's behaving as an input field.
Any insights into why this is happening...? Or suggestions on how to fix it?
Everything seems fine in Chrome, but Firefox version 26.0 is showing this issue.
Check out the current live version:
FULL CODE:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tic Tac Toe! (and more...)</title>
<meta name="description" content="Tic Tac Toe">
<meta name="author" content="SinSysOnline">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
body{
font-family:"Lucida Console", Monaco, monospace;
}
td{
padding:0;
margin:0;
border-right:1px solid #000;
border-bottom:1px solid #000;
width:100px;
height:100px;
text-align:center;
font-size:72px;
}
td:last-child{
border-right:none;
border-bottom:1px solid #000;
}
tr:last-child td{
border-bottom:none;
}
table{
padding:25px;
margin:0 auto;
cursor:pointer;
}
#dashboard{
background:#CCC;
padding:15px;
border:1px solid #000;
box-shadow:0 5px 15px #000;
}
#alert{
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
color:#F00;
text-align:right;
}
.check{
background:url("check.png");
}
</style>
</head>
<body>
<div id="dashboard">
<p>How large is your grid? (3-10)</p>
<input type="text" id="size" size="1" />
<input type="button" id="go" value="Create Board / Reset" />
<p id="alert">Alerts Live Here</p>
</div>
<table id="board">
</table>
<script>
var b=[], c=0;
$("#go").click(function () {
var b=[],
s = parseInt($("#size").val());
if (s<3 || s>10) { alert("That is not a valid input. Please select 3-10"); return; }
$('#board tr').remove();
$('#alert').text("Your Turn!");
for(var i=0;i<s;i++){
var tempArr = [];
for(var j=0;j<s;j++){ tempArr[j] = ""; }
b.push(tempArr);
}
for (var i = 0; i < s; i++) {
var $tr = $('<tr />', {id: 'row_' + i }).data('index', i + 1);
$("#board").append("<tr id='row_" + i + "'>");
for (var j = 0; j < s; j++) {
$('<td />', {
id: 'col_' + j
}).data('index', j + 1).appendTo($tr);
}
$("#board").append($tr);
}
$("#board").on('click', 'td', function () {
var $td = $(this),
td = $td.data('index'),
row = $td.parent().data('index');
if(b[row-1][td-1]!==""){
alert("Somebody already went there...");
} else {
b[row-1][td-1] = "X";
$td.addClass("check");
$('#alert').text(b);
}
});
});
</script>
</body>
</html>