Hey there! Can someone please help me figure out what's going on? I'm trying to create a Tic Tac Toe game, but instead of using "O" and "X" to mark the fields, I want to use different colors. Specifically, one player should be able to mark with blue and the other with red. The idea is that each time a player clicks on a field, the color should switch according to the player. Here's an example:
- Player 1: click --> blue
- Player 2: click --> red
- Player 1: click --> blue
- ...
But unfortunately, it's not working as expected!!! Any assistance or guidance on this issue would be greatly appreciated.
Source Code:
<html>
<head>
<meta charset="utf-8" />
<title>Tic Tac Toe |</title>
<link rel="stylesheet" type="text/css" href="stylesheetTicTacToe.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<table>
<tr>
<td><div id="field_7" class="gameBoard"></div></td>
<td><div id="field_8" class="gameBoard"></div></td>
<td><div id="field_9" class="gameBoard"></div></td>
</tr>
<tr>
<td><div id="field_4" class="gameBoard"></div></td>
<td><div id="field_5" class="gameBoard"></div></td>
<td><div is="field_6" class="gameBoard"></div></td>
</tr>
<tr>
<td><div id="field_1" class="gameBoard"></div></td>
<td><div id="field_2" class="gameBoard"></div></td>
<td><div id="field_3" class="gameBoard"></div></td>
</tr>
</table>
<script type="text/javascript">
var count = 1;
$(document).click(function() {
for(i = 0; i < 10;) {
if(count % 2 == 1) {
$('.gameBoard').click(function() {
$(this).css("background-color", "pink");
})
count++;
i++;
} else {
$('.gameBoard').click(function() {
$(this).css("background-color", "blue");
})
count++;
i++;
}
}
})
</script>
</body>
</html>