# Tic Tac Toe - update a variable based on player move

**URL:** <https://forum.freecodecamp.org/t/tic-tac-toe-update-a-variable-based-on-player-move/91062>\
**Category:** General\
**Created:** [February 25, 2017, 9:53am UTC](https://forum.freecodecamp.org/t/tic-tac-toe-update-a-variable-based-on-player-move/91062 "2017-02-25T09:53:43Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![doug20000](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/doug20000/32/41299_2.png) [@doug20000](https://forum.freecodecamp.org/u/doug20000)\
**Post date:** [February 25, 2017, 9:53am UTC](https://forum.freecodecamp.org/t/tic-tac-toe-update-a-variable-based-on-player-move/91062/1 "2017-02-25T09:53:43Z")

</div>

> **[Tic Tac Toe](https://codepen.io/doug20000/pen/MpYEOM)**
>
> ...

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?!

---

<div class="post-metadata">

**Author:** ![Reggie01](https://avatars.discourse-cdn.com/v4/letter/r/8c91f0/32.png) [@Reggie01](https://forum.freecodecamp.org/u/Reggie01)\
**Post date:** [February 25, 2017, 10:38am UTC](https://forum.freecodecamp.org/t/tic-tac-toe-update-a-variable-based-on-player-move/91062/2 "2017-02-25T10:38:25Z")

</div>

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

```auto
.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.

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

```

---

<div class="post-metadata">

**Author:** ![doug20000](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/doug20000/32/41299_2.png) [@doug20000](https://forum.freecodecamp.org/u/doug20000)\
**Post date:** [February 25, 2017, 11:02am UTC](https://forum.freecodecamp.org/t/tic-tac-toe-update-a-variable-based-on-player-move/91062/3 "2017-02-25T11:02:22Z")

</div>

This is a perfect solution, thank you.

---

<div class="post-metadata">

**Author:** ![doug20000](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/doug20000/32/41299_2.png) [@doug20000](https://forum.freecodecamp.org/u/doug20000)\
**Post date:** [February 25, 2017, 12:37pm UTC](https://forum.freecodecamp.org/t/tic-tac-toe-update-a-variable-based-on-player-move/91062/4 "2017-02-25T12:37:24Z")

</div>

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:

```auto
    $(".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](http://codepen.io/doug20000/pen/MpYEOM)

---

<div class="post-metadata">

**Author:** ![roxroy](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roxroy/32/42607_2.png) [@roxroy](https://forum.freecodecamp.org/u/roxroy)\
**Post date:** [February 25, 2017, 12:57pm UTC](https://forum.freecodecamp.org/t/tic-tac-toe-update-a-variable-based-on-player-move/91062/5 "2017-02-25T12:57:59Z")

</div>

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 }`

---

<div class="post-metadata">

**Author:** ![doug20000](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/doug20000/32/41299_2.png) [@doug20000](https://forum.freecodecamp.org/u/doug20000)\
**Post date:** [February 27, 2017, 4:38am UTC](https://forum.freecodecamp.org/t/tic-tac-toe-update-a-variable-based-on-player-move/91062/6 "2017-02-27T04:38:04Z")

</div>

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:

```auto
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!

---

<div class="post-metadata">

**Author:** ![roxroy](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roxroy/32/42607_2.png) [@roxroy](https://forum.freecodecamp.org/u/roxroy)\
**Post date:** [February 27, 2017, 5:57am UTC](https://forum.freecodecamp.org/t/tic-tac-toe-update-a-variable-based-on-player-move/91062/7 "2017-02-27T05:57:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![doug20000](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/doug20000/32/41299_2.png) [@doug20000](https://forum.freecodecamp.org/u/doug20000)\
**Post date:** [February 28, 2017, 8:13am UTC](https://forum.freecodecamp.org/t/tic-tac-toe-update-a-variable-based-on-player-move/91062/8 "2017-02-28T08:13:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![doug20000](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/doug20000/32/41299_2.png) [@doug20000](https://forum.freecodecamp.org/u/doug20000)\
**Post date:** [February 28, 2017, 10:09am UTC](https://forum.freecodecamp.org/t/tic-tac-toe-update-a-variable-based-on-player-move/91062/9 "2017-02-28T10:09:10Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 2:47pm UTC](https://forum.freecodecamp.org/t/tic-tac-toe-update-a-variable-based-on-player-move/91062/10 "2021-01-16T14:47:49Z")

</div>

Closed on January 16, 2021, 2:47pm UTC