CODEWITHSUNDEEP
javascript
user3439948
user3439948

Reputation: 23

Indicator error in tic tac toe javascript

I am having problem based on the indicator created in my tic tac toe javascript codes. can you help me solve it?

cell.indicator = indicator;

the console mentioned this Uncaught TypeError: Cannot set property 'indicator' of null at onload (javascript.js:54) here are the codings. 

var squares =[];
var EMPTY = '\xA0'
var score;
var moves;
var turn = 'X';

var wins = [ 119, 8064, 516096, 17930144, 2113929216, (1.352914698*10^10),
2181570690, 4363141380,8726282760,(1.745256552*10^10), (3.490513104*10^10),
(6.981026208*10^10),(96.926057496*10^10), 2216757312];

var startNewGame = function (){
    turn = 'X';
    score = {'X': 0 , 'O': 0};
    moves =0;
    for (var i = 0; i < squares.length; i += 1){
    squares[i].firstChild.nodeValue = EMPTY;
    }
    };

var win = function (score){
    for (var i = 0; i < wins.length; i++){
        if ((wins[i] & score) == wins[i]){
        }
        }
        return false;
};

var set = function(){
    if (this.firstChild.nodeValue !== EMPTY){
        return;
        }
    this.firstChild.nodeValue = turn;
    moves += 1;
    score[turn] += this.indicator;
    if (win(score[turn])){
        alert(turn + "wins!");
        startNewGame();
    }
    else if (moves === 36){
        alert("Beemo\u2019s game!");
        startNewGame();
    }
    else {
    turn = turn === 'X' ? 'O' : 'X';
    }
};

onload = function(){

var indicator = 1;
for (var i = 0; i < 6; i++){
    for (var j = 0; j < 6; j++){
        var cell = document.getElementById("cell" + i + j);
        cell.indicator = indicator;
        cell.onclick = set;
        cell.appendChild(document.createTextNode(''));
        squares.push(cell);
        indicator += indicator;
    }
}
startNewGame();
};

here's the HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>ULTIMATE TIC TAC TOE</title>
<script src="javascript.js"></script>
<style type="text/css">

h1{
text-align: center;
}

table{
border: outset 1px rgb(200, 200, 200)
}

td{
width: 50px;
height: 50px;
vertical-align: middle;
border: inset 1px rgb(200,200,200)
}

tr{
text-align: center;
}
</style>
</head>

<body>
<h1>Tic Tac Toe</h1>

<table align="center">

<tr>
<td id cell="cell00"></td>
<td id cell="cell01"></td>
<td id cell="cell02"></td>
<td id cell="cell03"></td>
<td id cell="cell04"></td>
<td id cell="cell05"></td>
</tr>

<tr>
<td id cell="cell10"></td>
<td id cell="cell11"></td>
<td id cell="cell12"></td>
<td id cell="cell13"></td>
<td id cell="cell14"></td>
<td id cell="cell15"></td>
</tr>

<tr>
<td id cell="cell20"></td>
<td id cell="cell21"></td>
<td id cell="cell22"></td>
<td id cell="cell23"></td>
<td id cell="cell24"></td>
<td id cell="cell25"></td>
</tr>

<tr>
<td id cell="cell30"></td>
<td id cell="cell31"></td>
<td id cell="cell32"></td>
<td id cell="cell33"></td>
<td id cell="cell34"></td>
<td id cell="cell35"></td>
</tr>

<tr>
<td id cell="cell40"></td>
<td id cell="cell41"></td>
<td id cell="cell42"></td>
<td id cell="cell43"></td>
<td id cell="cell44"></td>
<td id cell="cell45"></td>
</tr>

<tr>
<td id cell="cell50"></td>
<td id cell="cell51"></td>
<td id cell="cell52"></td>
<td id cell="cell53"></td>
<td id cell="cell54"></td>
<td id cell="cell55"></td>
</tr>

</table>

</body>
</html>

Upvotes: 1

Views: 84

Answers (1)

Brother Woodrow
Brother Woodrow

Reputation: 6372

The cells you're looking for cannot be found because all of their id attributes are empty, so document.getElementById("cell" + i + j) returns nothing. Change to <td id="cellxx"> and you'll be fine.

Then you will probably find that an HTML element doesn't have a property indicator; look into using the data- property instead: cell.setAttribute('data-indicator', indicator). You should also modify your set() method to read that property instead.

Upvotes: 1

Related Questions