Weird variable change in jQuery

Question

I'm running this JS/jQuery code, to make a simple "Tic Tac Toe" game I already did in pure Javascript. I put some console.log funtions to check, and as the function launches when I click on any button, I realize the few ramaining ones had wrong values, after the loop, even if the values were correct inside the loop(1to9). I'm kind of stuck here, could someone help me ?

var player = "O", tabo = [[1,2,3],[4,5,6],[7,8,9]], i = 0, j = 0;


$('button').click(function () {
    var id = this.id;
    if($('#' + id).text() !== "O" && $('#' + id).text() !== "X") {
        if (player === "O") {
            $('#' + id).text("O");
            player = "X";
        }else{
            $('#' + id).text("X");
            player = "O";
        }
    }else{
        alert("Case déjà prise !");
    }

    for (i = 0; i < 3; i++) {
        for (j = 0; j < 3; j++) {
            tabo[i,j] = $("#case" + (j + 1 + (3 * i))).text();
            console.log(tabo[i,j]);
        }
    }
    console.log(tabo[0,0]);
    console.log(tabo[1,0]);
    console.log(tabo[2,1]);
    console.log(tabo[1,1]);
    console.log(tabo[2,0]);
    console.log((tabo[0,0] === tabo[1,0]) +"1");
    console.log((tabo[0,0] === tabo[2,0]) +"2");
    console.log((tabo[1,1] === tabo[0,1]) +"3");
    console.log((tabo[1,1] === tabo[2,1]) +"4");


    if (((tabo[1,1] === tabo [0,0]) && (tabo[1,1] === tabo[2,2]))||
        ((tabo[1,1] === tabo [0,2]) && (tabo[1,1] === tabo[2,0]))||
        ((tabo[0,0] === tabo [0,1]) && (tabo[0,0] === tabo[0,2]))||
        ((tabo[0,0] === tabo [1,0]) && (tabo[0,0] === tabo[2,0]))||
        ((tabo[2,2] === tabo [2,0]) && (tabo[2,2] === tabo[2,1]))||
        ((tabo[2,2] === tabo [0,2]) && (tabo[1,1] === tabo[1,2]))||
        ((tabo[1,1] === tabo [1,0]) && (tabo[1,1] === tabo[1,2]))||
        ((tabo[1,1] === tabo [0,1]) && (tabo[1,1] === tabo[2,1]))) {
        alert(player + " a gagné !!!");
        //location.reload(true);
    }
});

Here is the associated HTML document

    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>jQuery</title>
            <link rel="stylesheet" href="../css/styles_jQuery.css" />
        </head>

        <body>
            <table>
                <tr id="line1">
                    <td><button id="case1">1</button></td>
                    <td><button id="case2">2</button></td>
                    <td><button id="case3">3</button></td>
                </tr>
                <tr id="line2">
                    <td><button id="case4">4</button></td>
                    <td><button id="case5">5</button></td>
                    <td><button id="case6">6</button></td>
                </tr>
                <tr id="line3">
                    <td><button id="case7">7</button></td>
                    <td><button id="case8">8</button></td>
                    <td><button id="case9">9</button></td>
                </tr>
            </table>
            <script src="http://code.jquery.com/jquery-3.1.0.min.js">
            </script>
            <script src="../js/jQuery.js"></script>
        </body>
    </html>

and simple css script

    body{
        background-color: aqua;
    }

    button{
        height: 50px;
        width: 50px;
    }

Why are you loading jQuery three times, including one time with a missing `"`? — Sebastian Simon, Sep 21 '16 at 14:12
*"I realize the few ramaining ones had wrong values, after the loop, even if the values were correct inside the loop(1to9)."* Be *specific*. *What* wrong values, what are the right values, where exactly are you seeing them, etc. Also: There's no need to be stumbling around in the dark with a `console.log` torch; turn the lights on with the fully-featured debugger built into your browser. — T.J. Crowder, Sep 21 '16 at 14:13
@Xufox at least it's the same version each time... (or at least two of them are anyway) — freedomn-m, Sep 21 '16 at 14:14
I was loading it only twice, the 3rd being the name of my JS file. the missing ' " ' was a typo when I put it here. And, the value of the loop, for instance, when I click the 1st button, are O 2 3 4 5 6 7 8 9, then, the 1st becomes 7, the 4 becomes 7, the 5 becomes 8 (the five firsts console put 77887). If I click on the button 8, 5 and 8 become O — Guillaume de Maleprade, Sep 21 '16 at 14:20

Vladu Ionut · Accepted Answer · 2016-09-21T14:17:55.747

0

Based on the comma operator the next instructions have the same result

tabo[0,0] == tabo[0] // true
tabo[1,0] == tabo[0] // true
tabo[2,0] == tabo[0] // true

The comma operator evaluates each of its operands (from left to right) and returns the value of the last operand.

I think you want to check tabo[i][j].

edited Sep 21 '16 at 14:17

answered Sep 21 '16 at 14:15

Vladu Ionut

8,075
1
19
30

It actually worked, thanks. The tabo[i][j] syntax returned erros, when I tried using it, but it now works perfectly (this part of the script, at least). – Guillaume de Maleprade Sep 21 '16 at 14:34

Weird variable change in jQuery

1 Answers1