Display image before reloading the page

Question

I am trying to create a tic tac toe game using jquery.

This is my code :

var i, j, m, k;
$(document).ready(function() {
  i = 0;
  m = new Array(3);
  for (var l = 0; l < 3; l++) {
    m[l] = new Array(3);
    for (k = 0; k < 3; k++)
      m[l][k] = null;
  }
});
$(".game").click(function() {

  var img;
  var col = $(this).index();
  var row = $(this).closest('tr').index();
  if (i % 2 == 0) {
    img = '<img src="file:///c:/NNK/TicTacToe/TicTacToeV1/WebContent/WEB-INF/tictactoeO.jpe"/>';
    m[row][col] = 'O';
  } else {
    img = '<img src="file:///c:/NNK/TicTacToe/TicTacToeV1/WebContent/WEB-INF/tictactoeX.jpe"/>';
    m[row][col] = 'X';
  }
  $(this).prepend(img);
  $(this).off();
  i++;
  var col = $(this).index();
  var row = $(this).closest('tr').index();
  if (i <= 8) {
    if (winhor(row, col)) {
      alert(m[row][col] + " Won!");
      location.reload();
    }
    if (winver(row, col)) {
      alert(m[row][col] + " Won!");
      location.reload();
    }
    if (windiag(row, col)) {
      alert(m[row][col] + " Won!Diag");
      location.reload();
    }
  } else {
    alert("Draw");
    location.reload();
  }
});

function winhor(row, col) {
  var sym = m[row][col];
  var val;
  var check = true;
  for (val = 0; val < 3; val++) {
    if (sym != m[row][val]) {
      check = false;
      break;
    }
  }
  return check;
}

function winver(row, col) {
  var sym = m[row][col];
  var val;
  var check = true;
  for (val = 0; val < 3; val++) {
    if (sym != m[val][col]) {
      check = false;
      break;
    }
  }
  return check;
}

function windiag(row, col) {
  var sym = m[row][col];
  var valr, valc;
  var check = true;
  if ((row != col) && (row + col != 2)) {
    //alert("not 0 or 3 or 2");
    return false;
  } else if (row == col) {
    for (valr = 0, valc = 0; valr < 3; valr++) {
      if (sym != m[valr][valc]) {
        //alert("not equal at "+valr+" "+valc);
        check = false;
        break;
      }
      valc++;
    }
  }
  if (row + col == 2) {
    check = true;
    for (valr = 0, valc = 2; valr < 3; valr++) {
      if (sym != m[valr][valc]) {
        //alert("not equal at "+valr+" "+valc);
        check = false;
        break;
      }
      valc--;
    }
  }
  return check;
}

td {
  height: 100px;
  width: 50px;
  font-size=30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table border="1">
  <tr>
    <td class="game"></td>
    <td class="game"></td>
    <td class="game"></td>
  </tr>
  <tr>
    <td class="game"></td>
    <td class="game"></td>
    <td class="game"></td>
  </tr>
  <tr>
    <td class="game"></td>
    <td class="game"></td>
    <td class="game"></td>
  </tr>
</table>

When a player wins the alert message is displayed first before the image is put in the cell. I want the image to appear before the alert message is shown. how should i do it?

Answer 1

You have just to wait for a while then show the alert() box, you could use setTimeout() by 100ms for example, check the example bellow :

setTimeout(function(){
  if (winhor(row, col)) {
    alert(m[row][col] + " Won!");
    location.reload();
  }
  if (winver(row, col)) {
    alert(m[row][col] + " Won!");
    location.reload();
  }
  if (windiag(row, col)) {
    alert(m[row][col] + " Won!Diag");
    location.reload();
  }
},100)

Hope this helps.

var i, j, m, k;
$(document).ready(function() {
  i = 0;
  m = new Array(3);
  for (var l = 0; l < 3; l++) {
    m[l] = new Array(3);
    for (k = 0; k < 3; k++)
      m[l][k] = null;
  }
});
$(".game").click(function() {

  var img;
  var col = $(this).index();
  var row = $(this).closest('tr').index();
  if (i % 2 == 0) {
    img = '<img src="http://hhscp.org/programming/static/exemplars/tictactoe/X.png"/>';
    m[row][col] = 'O';
  } else {
    img = '<img src="http://www.dreamincode.net/forums/uploads/post-97990-1260678636.png"/>';
    m[row][col] = 'X';
  }
  $(this).prepend(img);
  $(this).off();
  i++;
  var col = $(this).index();
  var row = $(this).closest('tr').index();

  if (i <= 8) {
    setTimeout(function(){
      if (winhor(row, col)) {
        alert(m[row][col] + " Won!");
        location.reload();
      }
      if (winver(row, col)) {
        alert(m[row][col] + " Won!");
        location.reload();
      }
      if (windiag(row, col)) {
        alert(m[row][col] + " Won!Diag");
        location.reload();
      }
    },100);
  } else {
    alert("Draw");
    location.reload();
  }
});

function winhor(row, col) {
  var sym = m[row][col];
  var val;
  var check = true;
  for (val = 0; val < 3; val++) {
    if (sym != m[row][val]) {
      check = false;
      break;
    }
  }
  return check;
}

function winver(row, col) {
  var sym = m[row][col];
  var val;
  var check = true;
  for (val = 0; val < 3; val++) {
    if (sym != m[val][col]) {
      check = false;
      break;
    }
  }
  return check;
}

function windiag(row, col) {
  var sym = m[row][col];
  var valr, valc;
  var check = true;
  if ((row != col) && (row + col != 2)) {
    //alert("not 0 or 3 or 2");
    return false;
  } else if (row == col) {
    for (valr = 0, valc = 0; valr < 3; valr++) {
      if (sym != m[valr][valc]) {
        //alert("not equal at "+valr+" "+valc);
        check = false;
        break;
      }
      valc++;
    }
  }
  if (row + col == 2) {
    check = true;
    for (valr = 0, valc = 2; valr < 3; valr++) {
      if (sym != m[valr][valc]) {
        //alert("not equal at "+valr+" "+valc);
        check = false;
        break;
      }
      valc--;
    }
  }
  return check;
}

td {
  height: 50px;
  width: 50px;
  font-size=30px;
}

img{
  width: 50px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table border="1">
  <tr>
    <td class="game"></td>
    <td class="game"></td>
    <td class="game"></td>
  </tr>
  <tr>
    <td class="game"></td>
    <td class="game"></td>
    <td class="game"></td>
  </tr>
  <tr>
    <td class="game"></td>
    <td class="game"></td>
    <td class="game"></td>
  </tr>
</table>