Using "this" with javascript and Jquery

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?

You could use onclick="displayX.call(this)", however it would be far easier to maintain if you removed the onclick. — user400654
– user400654, Commented Dec 6, 2012 at 18:31

Sushanth -- · Accepted Answer · 2012-12-06 17:55:30Z

5

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

answered Dec 6, 2012 at 17:55

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

ZAX Over a year ago

Why is it necessarily a bad idea to use "inline javascript"?

Selvakumar Arumugam Over a year ago

@ZAX You can read stackoverflow.com/questions/12627443/jquery-click-vs-onclick/… for more about why not to use inline scripts.

Sushanth -- Over a year ago

You have many disadvantages.. Your HTML page becomes heavy , caching is not possible, bad antipattern .. Also check this article robertnyman.com/2008/11/20/…

Sushanth -- Over a year ago

yup ..

$('.tictactoe').on('click' , function(){ // Here this corresponds to the td which was clicked that has the class called tictactoe }

Sushanth -- Over a year ago

you can just use this.id , inside the event .

|

Selvakumar Arumugam · Accepted Answer · 2012-12-06 17:55:01Z

1

Since you are using jQuery you can bind the handler using .on see below,

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

This is better than using onclick on the html. If you still want to use the onclick then you need to pass the this. See below,

and then in your js,

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

answered Dec 6, 2012 at 17:55

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

1 Comment

Selvakumar Arumugam Over a year ago

@JasonSperske Me neither, but I stopped asking why.

Scott S · Accepted Answer · 2012-12-06 17:57:01Z

1

You could bind the event using jquery. Do

$("#upleft").click(function(event){displayX(event)});

function displayX(event)
{
    $(event.target).html("X");
}

answered Dec 6, 2012 at 17:57

Scott S

2,73618 silver badges21 bronze badges

Comments

Dominic Goulet · Accepted Answer · 2012-12-06 17:56:36Z

0

Change your HTML element to pass the this :

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

And then modify your function to :

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

answered Dec 6, 2012 at 17:56

Dominic Goulet

8,1437 gold badges33 silver badges57 bronze badges

Collectives™ on Stack Overflow

Using "this" with javascript and Jquery

4 Answers 4

9 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related