Question

I am attempting to simplify some code for a tic tac toe game.

Every sector of the grid has the class “tictactoe” and an id specifiying their region e.g “upleft”. My thought is that onclick within the html element, will call a JavaScript function which will display an X in that space.

So here is what I have:

HTML Element:

<td id="upleft" onclick="displayX()" class="tictactoe"></td>

JavaScript/JQuery function:

                 function displayX()
                {
                        $('#upleft').text("x");
                }

Basically I want to change the function to using “this” instead of “#upleft”

However when I do this:

                function displayX()
                {
                        $(this).text("x");
                }

No text is displayed is the grid specified upleft. Firstly, does the “this” function, place the code into the id specified? And secondly, how can I remedy this issue?

Answer 1

You need to pass the DOM element as a argument to the function when you define the function Inline

onclick="displayX(this)" 


function displayX(elem)
{
    $(elem).text("x");
}

It’s a bad idea to write inline javascript.. .. Avoid it..

Better to attach the event in the javascripe file..

$("td").on('click', function () {
   $(this).text("x");
});