Menu
I am trying to make a tictactoe project in jQuery and I am having a major problem...
The tiles are in <td> tags and I am trying to make it so that when the user clicks the the tile, it calls the "marked" function.
If we now look into the "marked" function, $(this) is intended to be the <td> node that the function was called from.
However, it wasn't doing anything so I checked the console and apparently $(this) was containing the DOM Window object.
Is there anyway I can send the right kind of $(this) to the "marked" function?
Thank you!
<script type="text/javascript"> var TURN_X = false; var TURN_O = true; var turn = false; // this is to see whos turn it is. $(document).ready(function(){ var listCells = $.makeArray($("td")); $("td").click(function(){marked(listCells)}); //THIS IS WHERE I HAVE PROBLEMS return false; }); function marked(arr) { console.log($(this)); // THIS CONSOLE LOG RETURNS "DOM Window" $(this).addClass("marked"); if(turn == TURN_X) { this.innerHTML = "X"; turn = false; } else this.innerHTML = "O"; var tileNum = $(this).attr("id"); } 
849
Introduction to jQuery click The jQuery click () function is used to handle the click event when the click event occurs for the specific element. The jQuery click () function is a built-in function in jQuery.
In the below code, no function is passed to this method. In the below code, function is passed to this method. jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
The button “onclick” property is used to display the alert message when the button is clicked, as we can see in the above output. Example of jQuery click () function to handle the click event with handler function as parameter. In the above code, there is a “div” element that has “p”, and “span” as the child elements.
To declare a function, you have to use the simple syntax given below. Here, you need to change the function name with the name of the function you want to create. Inside that function, put the jQuery code you want to execute when you call the created function. jQuery. <script> function FunctionName () { //Enter your code here to execute on call;
You code does not follow the right principles.
$(function(){ var TURN_X = "X", TURN_O = "O", turn = TURN_O, $listCells = $("td"); function marked() { // define event handler var $this = $(this), tileNum = $this.attr("id"); if ( !($this.hasClass("marked") ) { $this.addClass("marked").text(turn); turn = (turn == TURN_X) ? TURN_O : TURN_X; } } $listCells.click(marked); // attach event handler }); this for you. this will always be what you expect if you pass callback functions directly instead of calling them yourself.
186
Send the element which fire the event to the function like that:
$("td").click(function(){ marked($(this)); return false; }); and in the function:
function marked(td) { console.log($(td)); $(td).addClass("marked"); //.... } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
