多维数组未更新（或者是…？）

Question

I have the most peculiar issue I can't seem to solve without writing band-aid code.

FULL SOURCE: http://sinsysonline.com/tictactoe_test.html or Fiddle: http://jsfiddle.net/JsXEP/

I am using a multidimensional array for the JS and a table for the HTML for data and display purposes.

So, our data will look something like this for JS :

var b = [ ["","",""], ["","",""], ["","",""] ];

The table will be a standard table with some CSS tweaks for our HTML :

<table id="board">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>

So, here is the problem. The input works just fine, resetting the game appears to work fine, but let's make a use-case so I can demonstrate the problem.

If I utilize a grid size of 3 initially, then try to make a game with a grid size of 4 without refreshing the page, the data seems to display at the top right for my array that the code is working as intended.

However, when you console.log(b) , it never actually updates b and anything after the first three rows in the table don't respond.

I'm given a console error of:

TypeError: b[row] is undefined

Why isn't b actually updating with the increased value, even though I define it as var b=[]; at the beginning of my click-handler for #go ?

And why is my #alert box for debugging filling in the correct b value?

Scratches Head

Any help is appreciated...

---

HTML:

<div id="dashboard">
    <p>How large is your grid? (3-10)</p>
    <input type="text" id="size" size="1" />

    <p>Which icon would you like?</p>
    <select name="mydropdown" id="mark">
        <option value="check">Check-Mark</option>
        <option value="x">Traditonal X</option>
        <option value="o">Traditional O</option>
    </select>
    <h3 id="title">Troubleshooting Console</h3>
    <input type="button" id="go" value="Create Board / Reset" />
    <p id="alert">Alerts Live Here</p> 
</div>
<table id="board">
</table>

Javascript:

$("#go").click(function () {
    var b=[],
        s = parseInt($("#size").val()),
        v = $("#mark").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 t = [];
        var $tr = $('<tr />').data('index', i + 1);

        for (var j = 0; j < s; j++) {
            t[j] = "";
            $('<td />').data('index', j + 1).appendTo($tr);
        }
        b.push(t);
        $("#board").append($tr);
    }

    $("#board").on('click', 'td', function () {
        var $td = $(this),
            td = $td.data('index')-1,
            row = $td.parent().data('index')-1;
        b[row][td] = "X";
        $td.removeClass().addClass(v);
        $('#alert').text(b);
    });
});

FULL SOURCE: http://sinsysonline.com/tictactoe_test.html or Fiddle: http://jsfiddle.net/JsXEP/

Answer 1

The problem is because of the closure property and multiple definitions of on click function. Updated Fiddle

$("#board").on('click', 'td', function () {
    var $td = $(this),
        td = $td.data('index')-1,
        row = $td.parent().data('index')-1;
    b[row][td] = "X";
    $td.removeClass().addClass(v);
    $('#alert').text(b);
});

This function is registered every time user changes the settings and whenever it is defined, it captures the b . So, first time, lets say, b is [3][3] and the on click function is created with that. Next time, b is [4][4] and a new on click function is created (old one still exists, with b [3][3]). So both of them are fired now onwards. If I select anything outside 3 x 3, the old one fails. That's why you are facing this problem.

So, I just moved the definition of on click function, b and v outside and it works fine now.