Tic Tac Toe - update a variable based on player move

1

I have broken the 9 potential spaces into a grid labeled A1, A2, A3, B1… ect.

What I’ve done so far is when a user clicks on a space their piece shows up. But what I need to do next is also have the appropriate variable = the user’s piece. I’m not sure how to do this.

My div id’s are named the same as the corresponding variables. So, if a user clicks on div A1, their letter shows up. Next variable A1 should = X or O depending on what they chose. How could I do this?!

2

You have to retrieve the id from the event object. The event object is automatically generated when you click on dom.

.click( function( evt ) {
  
  var id = evt.target.id;
  // rest of your logic
  
}

The rest of your logic will be assigning the value to the appropriate variable. You could create another function to handle this part.

function assignVariableValue( id, playerTurn ) {
  var value = playerTurn ? playerPiece : comptuterPiece;
  if( id === "A1" ) {
    A1 = value;
    // rest of logic
}
1 Like
3

This is a perfect solution, thank you.

4

Perhaps you can help with another part of my code. I am trying to make the validation to prevent a user from selecting a square that has been selected already. I wrote:

    $(".gameSquare").click(function (evt) {
        if (playerTurn) {
            if ($("h2", this).html !== "") {
                alert("Pick an empty square") //HELP WITH THIS VALIDATION
            }

But the problem is the alert comes up no matter what. How can I test to see if it is just empty html or not?

my codepen again: http://codepen.io/doug20000/pen/MpYEOM

5

You are almost there and are trying to check whether the h2 cell is empty.
Rather then using ‘this’, use the evt object from the parameter. Let say you wanted to get to h2 in A1, from a CSS point of view you would use #A1>h2. Then use the html() function to get the content and check that it is empty.
Let’s write this in Javascript terms and change the condition statement to:

if ( $("#"+evt.target.id+" > h2").html() !== "") { ....your code goes here }

6

This solution makes sense to me but it’s still giving me some problems. I was still getting the error message even when the square was empty.

I used my test button to display what the html was for A1 and regardless of having clicked the square or not it shows:

function (a){return S(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a&&1===b.nodeType)return b.innerHTML;if("string"==typeof a&&!za.test(a)&&!la[(ja.exec(a)||["",""])[1].toLowerCase()]){a=r.htmlPrefilter(a);try{for(;c<d;c++)b=this[c]||{},1===b.nodeType&&(r.cleanData(ma(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)}

I’m really confused where all that came from!

7

For your test button, you left off the brackets when calling the html function to retrieve the data stored between the tags. Use alert( $("#A1 > h2").html() );

Make the same change to if ($("#" + evt.target.id + " > h2").html() !== "")
Let me know if this helps.

8

I’m not sure what’s happened but this I’ve got this sort of working-- You aren’t able to select a chosen square, however if you do the alert message doesn’t come up. It’s not a very big deal, I’m just not sure why that has occurred.

9

I was wrong, it does work. I was just clicking on the text in the square when I tested. But if I click the outer edges of the square the alert comes up. Thanks for all the help!