There have been a lot of questions about Tic-Tac-Toe javascript, but my issue is unique. My code works fine, but it doesn't declare a winner or a tie game until the entire board is filled. I suspect that my if statements are causing problems and can't read a "nodeValue of null" unless the whole board is fully populated. How can I solve this? I tried adding a "blank" text node to the board, but then all blank squares become equal. Is there a way to compare empty squares with filled ones to determine a win? (Specifically looking at the Array defined in the start_game() function and the if statements inside the beat_game() function for comparing 2-D arrays). Besides addressing this, any suggestions on improving my js code are welcome. Here's the code snippet:
<html>
<head>
<script type="text/javascript">
window.onload = function page_load() {
// alert('in here');
start_game();
}
function start_game() {
if (document.getElementById('board')) {
document.getElementById('board').parentNode.removeChild(document.getElementById('board'));
}
win_Array = [
[
'TL',
'TM',
'TR'
],
[
'ML',
'MM',
'MR'
],
[
'BL',
'BM',
'BR'
]
];
body = document.getElementsByTagName('body')[0];
table = document.createElement('table');
table.id = 'board';
table.setAttribute('border', '1');
body.appendChild(table);
tbody = document.createElement('tbody');
table.appendChild(tbody);
run = 0;
win = 0;
var count;
td_Array = [{
t: 'TL',
m: 'ML',
b: 'BL'
}, {
t: 'TM',
m: 'MM',
b: 'BM'
}, {
t: 'TR',
m: 'MR',
b: 'BR'
}];
tr = document.createElement('tr');
tr.id = "tr1";
tbody.appendChild(tr);
for (count = 0; count <= 2; count++) {
td = document.createElement('td');
td.id = td_Array[count].t;
td.setAttribute('onClick', 'value("' + td_Array[count].t + '")');
tr.appendChild(td);
}
tr = document.createElement('tr');
tr.id = "tr2";
tbody.appendChild(tr);
for (count = 0; count <= 2; count++) {
td = document.createElement('td');
td.id = td_Array[count].m;
td.setAttribute('onClick', 'value("' + td_Array[count].m + '")');
tr.appendChild(td);
}
tr = document.createElement('tr');
tr.id = "tr3";
tbody.appendChild(tr);
for (count = 0; count <= 2; count++) {
td = document.createElement('td');
td.id = td_Array[count].b;
td.setAttribute('onClick', 'value("' + td_Array[count].b + '")');
tr.appendChild(td);
}
}
function value(data) {
console.log(data);
console.log(document.getElementById(data));
if (run % 2 !== 0) {
td = document.getElementById(data);
text = document.createTextNode('O');
td.appendChild(text);
document.getElementById(data).removeAttribute('onClick');
} else {
td = document.getElementById(data);
text = document.createTextNode('X');
td.appendChild(text);
document.getElementById(data).removeAttribute('onClick');
} //document.getElementById('').childNodes[0].nodeValue //node value prevents error.
run++;
beat_game();
}
function beat_game() {
// alert('test sucessful');
var x, y;
for (x = 0; x < 3; x++)
{ //for checking across td's
if (document.getElementById(win_Array[x][0]).childNodes[0].nodeValue == document.getElementById(win_Array[x][1]).childNodes[0].nodeValue
&& document.getElementById(win_Array[x][1]).childNodes[0].nodeValue == document.getElementById(win_Array[x][2]).childNodes[0].nodeValue)
{
win = true;
win_value = document.getElementById(win_Array[x][0]).childNodes[0].nodeValue;
}
}
for (y = 0; y < 3; y++)
{ //for checking down td's
if (document.getElementById(win_Array[0][y]).childNodes[0].nodeValue == document.getElementById(win_Array[1][y]).childNodes[0].nodeValue
&& document.getElementById(win_Array[1][y]).childNodes[0].nodeValue == document.getElementById(win_Array[2][y]).childNodes[0].nodeValue)
{
win = true;
win_value = document.getElementById(win_Array[0][y]).childNodes[0].nodeValue;
}
} // checking across values here...
if ( document.getElementById(win_Array[0][0]).childNodes[0].nodeValue == document.getElementById(win_Array[1][1]).childNodes[0].nodeValue
&& document.getElementById(win_Array[1][1]).childNodes[0].nodeValue == document.getElementById(win_Array[2][2]).childNodes[0].nodeValue
|| document.getElementById(win_Array[0][2]).childNodes[0].nodeValue == document.getElementById(win_Array[1][1]).childNodes[0].nodeValue
&& document.getElementById(win_Array[1][1]).childNodes[0].nodeValue == document.getElementById(win_Array[2][0]).childNodes[0].nodeValue)
{
win = true;
win_value = document.getElementById(win_Array[0][0]).childNodes[0].nodeValue;
}
if(win == true)
{
if(win_value == 'X')
{
alert('Player 1 Wins!');
}else{
alert('Player 2 Wins!');
}
}else {
alert("Cat's Game!");
}
}
</script>
<style>
td {
width: 50px;
height: 50px;
text-align: center;
}
body {
font-size: 6;
}
</style>
</head>
<body>
</body>
</html>
Thank you!