Question: ```
var x = true;

function flip()
{
 if (x == true)
{
 this.innerHTML = "X";
 x = false;
}
else
{
 this.innerHTML = "O";
 x = true;
}
}

for(var i = 1; i <10; i++)
{
 document.getElementById("cell"+i).onclick = flip;
}

```

So far this code allows me to play tic tac toe with cell 3x3, but i need help extending it so when one player has selected X it cant be overwritten by O it should not allow an O to replace an already existing X..

Thank You

Answer: 
Just check if the content has been set with any value, and if so, return immediately.

The code below also shortens it a good bit.

```js
var x = true;

function flip() {
  if (this.textContent) {
    return; // Already set, so return
  }
  this.textContent = x ? "X" : "0";
  x = !x;
}

for (var i = 1; i < 10; i++) {
  document.getElementById("cell" + i).onclick = flip;
}
```

```css
td {
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 40px;
}
```

```html
<table border=1>
<tr><td id=cell1><td id=cell2><td id=cell3></tr>
<tr><td id=cell4><td id=cell5><td id=cell6></tr>
<tr><td id=cell7><td id=cell8><td id=cell9></tr>
</table>
```
I've created a example in which you can increase or decrease the row and col count. This is just an example to show you how it could be done.

```js
var x = true;
// change this variable to increase/decrease the rows and cols
var rowCount = 3;

function flip(ev) {
  var target = ev.target;

  // check if the target has children
  if (target.children.length !== 0) {
    // the target has children, don't do anything
    return;
  }

  // create a textNode instead of implicit creating one trough HTMLElement.innerHTML
  var textNode = document.createTextNode((x) ? 'X' : 'O');
  // create spanElement to be able to style the (x/o) text
  var span = document.createElement('span');
  span.appendChild(textNode);

  target.appendChild(span);
  // use the logical NOT operator
  x = !x;
}

// @doc https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment
var fragment = document.createDocumentFragment();

for (var y = 0; y < rowCount; y++) {
  var tr = document.createElement('tr');

  for (var x = 0; x < rowCount; x++) {
    var td = document.createElement('td');

    td.className = 'cell';
    td.addEventListener('click', flip);
    tr.appendChild(td);
  }

  fragment.appendChild(tr);
}

document.getElementById('grid').appendChild(fragment);
```

```css
html,
body,
#grid {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

table#grid {
  table-layout: fixed;
}

#grid>tr>td {
  border: 1px solid #999;
  text-align: center;
}

#grid>tr>td>span {
  font-size: 100%;
  text-transform: uppercase;
}
```

```html
<table id="grid"></table>
```