Home/ Questions/Q 8823153
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T06:17:00+00:00

I am attempting to create a tic-tac-toe browser game utilizing JavaScript and jQuery, along

  • 0

I am attempting to create a tic-tac-toe browser game utilizing JavaScript and jQuery, along possibly with PHP.

I have the board arranged how I like utilizing a table and adding borders appropriately. Each cell in the tic-tac-toe board has its own unique id, e.g topleft, topright, botleft, etc.

For testing purposes, before I can even get to writing the code supporting the game, I am attempting to get an "X" to appear when the user clicks an appropriate spot, however I am having no luck.

Here is the JavaScript I have so far:

 <script type="text/javascript">

                function mark()
                {
                        document.getElementById('topleft').innerHTML = "X";
                }

                function init()
                {
                        var button = document.getElementById('topleft');
                        button.addEventListener('click', mark, false);
                }

                $(document).ready(function()
                {
                        $('#topleft').click(function()
                        {
                        });

                });
        </script>

And here is the html:

<body>
        <div>
                <table>
                        <tr>
                                <td id="upleft">
                                </td>
                                <td id="upcenter">
                                </td>
                                <td id="upright">
                                </td>
                        </tr>
                        <tr>

By my logic, the page loads, and then topleft gets a click listener. Upon clicking that cell the listener is tripped, which then calls the function mark to place an X in the cell, however nothing appears clickable on the page, and no mark appears afterwards.

If anyone can spot an error or has a suggestion I’d be grateful!

Additionally, if you have any ideas for programming the logic behind a tic-tac-toe board (nothing too fancy) I’d be grateful as well.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    try it this way:

    $('#topleft').click(function() {
    $(this).text('X');
});

    Next step, don’t use #topleft directly, but generic case className ($('.tictactoe-case')) to not repeat yourself.

    Good luck!

    • 0