CODEWITHSUNDEEP
javascriptjquerycss
ghnome
ghnome

Reputation: 57

Tic Tac Toe does not work

He, guys! Would somebody be so kind, to tell me what's wrong? I want to program a Tic Tac Toe game. But I don't want to mark the game fields with "O" and "X". No, I want to mark them with different colours. So, the problem I have, is that, one player should have the color blue and the other player should have the color red. So every time a player clicked on the game fied the other player should have the other color. Like this:

But this does not work!!! I would be very thankful, if some of you would be able to answer my question.

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>

Upvotes: 0

Views: 200

Answers (1)

Cymen
Cymen

Reputation: 14419

You should take advantage of how event binding works. If you do, you don't have to iterate over all the potential cells -- you know by the event.target which cell was clicked on. For example:

var playCount = 0;

$(document).click(function(event) {
    var cell = $(event.target).closest('.gameBoard');
    if (!cell.hasClass("played")) {
        if (playCount % 2 == 1) {
            cell
                .css("background-color", "pink")
                .addClass("played");
            playCount++;
        } else {
            cell
                .css("background-color", "blue")
                .addClass("played");
            playCount++;
        }
    }
});

JSFiddle: http://jsfiddle.net/4hgr0wke/

If can also bind more appropriately to the cells so that you only get a click event when a cell is clicked on. For example:

var playCount = 0;

$(document).on('click', '.gameBoard', function(event) {
    var cell = $(event.target).closest('.gameBoard');
    if (!cell.hasClass("played")) {
        if (playCount % 2 == 1) {
            cell
                .css("background-color", "pink")
                .addClass("played");
            playCount++;
        } else {
            cell
                .css("background-color", "blue")
                .addClass("played");
            playCount++;
        }
    }
})

JSFiddle: http://jsfiddle.net/4hgr0wke/1/

Upvotes: 2

Related Questions