javascript - Display image before reloading the page -


i trying create tic tac toe game using jquery.

this code :

var i, j, m, k;  $(document).ready(function() {    = 0;    m = new array(3);    (var l = 0; l < 3; l++) {      m[l] = new array(3);      (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;    (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;    (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) {      (valr = 0, valc = 0; valr < 3; valr++) {        if (sym != m[valr][valc]) {          //alert("not equal @ "+valr+" "+valc);          check = false;          break;        }        valc++;      }    }    if (row + col == 2) {      check = true;      (valr = 0, valc = 2; valr < 3; valr++) {        if (sym != m[valr][valc]) {          //alert("not equal @ "+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 player wins alert message displayed first before image put in cell. want image appear before alert message shown. how should it?

you have wait while show alert() box, use settimeout() 100ms example, check 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 helps.

var i, j, m, k;  $(document).ready(function() {    = 0;    m = new array(3);    (var l = 0; l < 3; l++) {      m[l] = new array(3);      (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;    (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;    (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) {      (valr = 0, valc = 0; valr < 3; valr++) {        if (sym != m[valr][valc]) {          //alert("not equal @ "+valr+" "+valc);          check = false;          break;        }        valc++;      }    }    if (row + col == 2) {      check = true;      (valr = 0, valc = 2; valr < 3; valr++) {        if (sym != m[valr][valc]) {          //alert("not equal @ "+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>


Comments

Post a Comment

Popular posts from this blog

jOOQ update returning clause with Oracle -

according http://www.jooq.org/doc/3.8/manual/sql-building/sql-statements/update-statement/ jooq doesn't support returning clause in update statements databases except firebird , postgres. does know, still correct oracle jooq? according oracle's documentation, oracle db supports returning clase delete, insert, or update statements. incorrect manual you're right - manual wrong , should fixed: https://github.com/jooq/jooq/issues/5470 single row update returning jooq 3.8 added support single row update .. returning statements. internally, uses callablestatement , pl/sql block of form: begin update "my_table" set "my_table"."column" = 'xyz' "my_table"."id" = 1 returning "my_table"."id", "my_table"."column" ?, ?; ? := sql%rowcount; end; the relevant issue is: https://github.com/jooq/jooq/issues/5190 multi row update returning a...
Read more

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

i have entity inherits other. on other hand, i'm using lombok project reduce boilerplate code, put @data annotation. annotation @data inheritance produces next warning: generating equals/hashcode implementation without call superclass, though class not extend java.lang.object. if intentional, add '@equalsandhashcode(callsuper=false)' type. is advisable add annotation @equalsandhashcode (callsuper = true) or @equalsandhashcode (callsuper = false) ? if not added, 1 callsuper=false or callsuper=true ? the default value false . 1 if don't specify , ignore warning. yes, recommended add @equalsandhashcode annotation on @data annotated classes extend else object. cannot tell if need true or false , depends on class hierarchy, , need examined on case-by-case basis. however, project or package, can configure in lombok.config call super methods if not direct subclass of object. lombok.equalsandhashcode.callsuper = call for configuration system ...
Read more

java - BasicPathUsageException: Cannot join to attribute of basic type -

i using java 8 jpa (hibernate 5.2.1). have clause works perfectly, until introduce clause make use foreign key table values too. i getting following error: basicpathusageexception: cannot join attribute of basic type i think problem related fact have join table, , not sure how create join using join table. employee - employee_category - category model (employee.java): @manytomany(cascade = cascadetype.all, fetch=fetchtype.eager) @jointable ( name="employee_category", joincolumns={ @joincolumn(name="emp_id", referencedcolumnname="id") }, inversejoincolumns={ @joincolumn(name="cat_id", referencedcolumnname="id") } ) private set<category> categories; model (category.java): @id private string id; jpa when introduce following code, fails error above (i think problem new piece of code): join<t, category> category = from.join("id"); predicates.add(criteriabuilder.like(category....
Read more