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>
```
A check to see if a cell has already got an X or an O in it should achieve what you want.

I modified your `flip` function to add this check:

```
var x = true;

function flip() {
  if (this.innerHTML != "X" && this.innerHTML != "O") { // if the cell is filled, don't let it be flipped
    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;
}

```

and I tested it here: <https://jsfiddle.net/4okar70j/>