Guillaume de Maleprade Guillaume de Maleprade - 2 months ago 5
jQuery Question

Weird variable change in jQuery

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;
}

Answer

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

Comments