If a field is occupied by another value alert

Question

I am making a little Tic Tac Toe game and I want to alert the user when they try to click in a cell which already has a value in it. Here is what I have so far.

    var turn = "O";
     //player 1 = turn  = O
     //player2 = turn  = X
    var cell = $('#cell');

    function go(cellID) {
      //alert(turn);
      var boxId = "#" + cellID;
      if (cell = null) {
        if (turn == 'O') {
          $(boxId).html("O");
          turn = 'X';
        } else {
          if (turn == 'X') {
            $(boxId).html("X");
            turn = 'O';
          }
        }
      } else {
        alert('Pick another box')
      }

      //alert(cellID);
      $('h2:last').html('Turn: ' + turn);
      return turn;
    }

.cell {
  height: 20px;
  width: 10px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gameTable">
  <table style="width: 100%;">
    <tr>
      <td onclick="go('C0')" id="C0" class="cell"></td>
      <td onclick="go('C1')" id="C1" class="cell"></td>
      <td onclick="go('C2')" id="C2" class="cell"></td>
    </tr>
    <tr>
      <td onclick="go('C3')" id="C3" class="cell"></td>
      <td onclick="go('C4')" id="C4" class="cell"></td>
      <td onclick="go('C5')" id="C5" class="cell"></td>
    </tr>
    <tr>
      <td onclick="go('C6')" id="C6" class="cell"></td>
      <td onclick="go('C7')" id="C7" class="cell"></td>
      <td onclick="go('C8')" id="C8" class="cell"></td>
    </tr>
  </table>
</div>

what is your problem? also `if (cell = null)` does not look correct, do you not want `if (cell == null)`? — bitten, Dec 20 '16 at 11:22
First, its `==` or `===` and not `=` in conditional expression. Second, posting your HTML code would help. Last, read [How to check null objects in jQuery](http://stackoverflow.com/questions/477667/how-to-check-null-objects-in-jquery). — Alon Adler, Dec 20 '16 at 11:22
@kieron is that solved your problem or you are looking for something else. I have created the fiddle for you to play with. https://jsfiddle.net/9rercohk/ — squiroid, Dec 20 '16 at 11:34
@keirin you need to add more information about your problem. However, another problem is that `$('#cell');` is looking for something with the ID of "cell" but I think you need the class "cell" : `$('.cell');` — Matthew Wilcoxson, Dec 22 '16 at 15:00

score 1 · Accepted Answer · answered Dec 20 '16 at 14:30

I think I understand your problem. Your check on line 9 is not quite correct. You can see if the value of the element is empty by using .html() which returns the content of the element, and if the element is empty it will return an empty string.

if (cell = null) { would then become if ($(boxId).html() === '') {

See the updated fiddle here

score -1 · Answer 2 · answered Dec 20 '16 at 15:06

As others have stated, your if (cell = null) is incorrect and should be if ($(boxId).html() === '').

Another point to make is that you should not be using the onclick event inside of your td elements. Instead, you should be using jquery's .on('click') event.

Check out this JSFiddle

If a field is occupied by another value alert

2 Answers2