JavaScript Uncaught TypeError: Cannot set property '-1' of undefined

Question

I'm practicing jquery and am trying to build a very basic Tic Tac Toe game.

I'd like to set my html table equivalent to the indexes of an grid in array form and change their values depending on the player's click. Currently I have the color change depending on turn working, but I keep getting this Uncaught TypeError referencing the line that says board[row][col] = x in my conditional statement.

My code:

$(document).ready(function(event) {

    var count = 0;

    var board = [
        [0, 0, 0], 
        [0, 0, 0], 
        [0, 0, 0]
    ];

    var row = $(this).parent().index();
  var col = $(this).index();

    $('td').click(function() {
        // if count is even, player 1 is yellow
        // if count is odd, player 2 is blue
        if (count % 2 === 0) {
            $(this).addClass('yellow');
            count++;
            board[row][col] = 1;
        } else {
            $(this).addClass('blue');
            count++;
            board[row][col] = 2;
        }
    });
});

relevant html:

<div id="main_container">
    <h1 id="main_heading" class="heading" >Tic! Tac! Toe!</h1>
    <h2 id="winning"></h2>
    <table>
        <tbody>
            <tr class="box_row" >
                <td id="box_0_0" class="box_cell" data-row="0" data-col="0" data-clicked="0"></td>

                <td id="box_0_1" class="box_cell" data-row="0" data-col="1" data-clicked="0"></td>

                <td id="box_0_2" class="box_cell" data-row="0" data-col="2" data-clicked="0"></td>
            </tr>
            <tr class="box_row">
                <td id="box_1_0" class="box_cell" data-row="1" data-col="0" data-clicked="0"></td>

                <td id="box_1_1" class="box_cell" data-row="1" data-col="1" data-clicked="0"></td>

                <td id="box_1_2" class="box_cell" data-row="1" data-col="2" data-clicked="0"></td>
            </tr>
            <tr class="box_row">
                <td id="box_2_0" class="box_cell" data-row="2" data-col="0" data-clicked="0"></td>

                <td id="box_2_1" class="box_cell" data-row="2" data-col="1" data-clicked="0"></td>

                <td id="box_2_2" class="box_cell" data-row="2" data-col="2" data-clicked="0"></td>
            </tr>
        </tbody>
    </table>
</div>

relevant css:

.yellow {
  background-color: #ffc300;
}

.blue {
  background-color: #73d2c9;
}

Answer 1

The problem is where you are reading the index values, you need to read it inside the click handler

$(document).ready(function (event) {

    var count = 0;

    var board = [
        [0, 0, 0],
        [0, 0, 0],
        [0, 0, 0]
    ];

    //here this is the document object
    $('td').click(function () {

        //reading index values should be inside the click handler, here `this` refers to the clicked `td` element
        var row = $(this).parent().index();
        var col = $(this).index();


        // if count is even, player 1 is yellow
        // if count is odd, player 2 is blue
        if (count % 2 === 0) {
            $(this).addClass('yellow');
            count++;
            board[row][col] = 1;
        } else {
            $(this).addClass('blue');
            count++;
            board[row][col] = 2;
        }
    });
});