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. — Kevin B, Dec 06 '12 at 18:31

score 5 · Accepted Answer · answered Dec 06 '12 at 17:55

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 06 '12 at 17:55

Sushanth --

53,795
7
57
95

Why is it necessarily a bad idea to use "inline javascript"? – ZAX Dec 06 '12 at 17:58
1

@ZAX You can read http://stackoverflow.com/questions/12627443/jquery-click-vs-onclick/12627478#12627478 for more about why not to use inline scripts. – Selvakumar Arumugam Dec 06 '12 at 17:59
1

You have many disadvantages.. Your HTML page becomes heavy , caching is not possible, bad antipattern .. Also check this article http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/ – Sushanth -- Dec 06 '12 at 17:59
Sorry, last question for clarification, if I were to use the second method, not inline java, and I placed my class name .tictactoe for the on click handler, the this would identify the actual id (spot on the grid) that I wish to add the X to correct? – ZAX Dec 06 '12 at 18:04
@ZAX Yes, using `this` would be the actual element that is clicked. – Selvakumar Arumugam Dec 06 '12 at 18:06
1

yup .. `$('.tictactoe').on('click' , function(){ // Here this corresponds to the td which was clicked that has the class called tictactoe }` – Sushanth -- Dec 06 '12 at 18:06
Alright, ran into one more issue, then I've got it done.... To further simplify and keep track of which spaces have been clicked to check for a winner, I need to know which spot was clicked so I need the id. I cannot find a this.getName() function available in JavaScript or something similar that will return the id. Thoughts on how to get the id name or some other identifier I might be able to use? – ZAX Dec 06 '12 at 18:09
@ZAX You should post that as another question. This question is answered. – Selvakumar Arumugam Dec 06 '12 at 18:10
1

you can just use `this.id` , inside the event . – Sushanth -- Dec 06 '12 at 18:15

score 1 · Answer 2 · answered Dec 06 '12 at 17:55

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 06 '12 at 17:55

Selvakumar Arumugam

76,636
14
118
132

@JasonSperske Me neither, but I stopped asking why. – Selvakumar Arumugam Dec 06 '12 at 17:59

score 1 · Answer 3 · answered Dec 06 '12 at 17:57

1

You could bind the event using jquery. Do

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

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

answered Dec 06 '12 at 17:57

Scott S

2,528
14
17

score 0 · Answer 4 · answered Dec 06 '12 at 17:56

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 06 '12 at 17:56

Dominic Goulet

7,717
7
23
54

Using "this" with javascript and Jquery

4 Answers4