Weird variable change in jQuery [duplicate]

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
– Sebastian Simon, Commented Sep 21, 2016 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
– T.J. Crowder, Commented Sep 21, 2016 at 14:13
@Xufox at least it's the same version each time... (or at least two of them are anyway) — fdomn-m
– fdomn-m, Commented Sep 21, 2016 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
– Guillaume de Maleprade, Commented Sep 21, 2016 at 14:20

Vladu Ionut · Accepted Answer · 2016-09-21 14:17:55Z

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, 2016 at 14:17

answered Sep 21, 2016 at 14:15

Vladu Ionut

8,2231 gold badge23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Guillaume de Maleprade Over a year ago

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).

Collectives™ on Stack Overflow

Weird variable change in jQuery [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related