how can i randomly select a cell in my TIC TAC TOE

Question

I am new to programming as to stack overflow so be easy on me. i am making an tic tac toe game and haven't found a to mark a random_cell and append and image to it so if you could help it will be of most help. jquery are also welcome

var x_or_o = ["x","o"];
var user = x_or_o[Math.floor(Math.random()*x_or_o.length)];

function random_cell(){
 var cells = ["zero","one","two"];
 return ("#"+cell[Math.floor(Math.random()*cells.length)]+"_"+cell[Math.floor(Math.random()*cells.length)]);
}


function clink(id_ele){
 $(id_ele).one(("click",water(id_ele)));
}
 
function water(id_ele){
 $(id_ele).click(function(){
 if (user == "x"){
   $(id_ele).append("<img src =img/x.png>").addClass("done-x");
    if (! random_cell.hasClass()){
     $(random_cell).append("<img src =img/o.png>");
     }
    else{
     random_cell();
     water(id_ele);
    }
  }
 else if (user == "o"){
  $(id_ele).append("<img src =img/o.png>").addClass("done-o");
 }
}
)
}

clink("#zero_zero");
clink("#zero_one");

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Tic Tac Toe</title>
 <link rel="stylesheet" href="css/main.css">
</head>
<body>
 <header>
  <h1>TIC TAC TOE</h1>
 </header>
 <section>
  <table>
   <tr>
    <td id = "zero_zero"></td>
    <td id = "one_zero"></td>
    <td id = "two_zero"></td>
   </tr>
   <tr>
    <td id = "zero_one"></td>
    <td id = "one_one"></td>
    <td id = "one_two"></td>
   </tr>
   <tr>
    <td id = "two_zero"></td>
    <td id = "two_one"></td>
    <td id = "two_two"></td>
   </tr>
  </table>
 </section>
 <footer>
  <p>&copy; Kunal Mehta 2016</p>
  <img src="img/facebook.png" alt="">
  <img src="img/twitter.png" alt="">
 </footer>
 <script src="js/jquery.js"></script>
 <script src="js/main.js"></script>
</body>
</html>

@Jonasw can use `one` if they only want to bind one click event to it: http://api.jquery.com/one/, which in tic tac toe I guess is correct as you can only fill the box once — Pete, Aug 25 '16 at 14:11
use [function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min;}](http://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range) between 1 and 9 and translate the result to your cell... — DIEGO CARRASCAL, Aug 25 '16 at 14:20
@Jonasw, that code probably needs cleaning up because by the looks, they are calling a function to bind a click event that when fired will do nothing but bind another click event - seems a bit odd not to just bind the second click event at the start (therefore getting rid of one extra binding) and I agree, there is overuse of brackets all over the place, makes the code hard to read! — Pete, Aug 25 '16 at 14:30
@Jonasw I believe he is trying to make the machine "move" to play against the user... so that is why I just commented with the link to a SO question that show the "theory" that he should apply to his logic. My approach to that game would separate the logic of the game from the visual part, I would keep an array with the board and a variable that tells me who's time to play it is, so on click it solves the image to display, enter the move into the board array and test if someone wins... But that is just my approach and doesn't answer his question, "how to randomly select a cell". — DIEGO CARRASCAL, Aug 25 '16 at 15:45

Jonas Wilms · Answer 1 · 2016-08-25T14:19:42.560

Your random_cell function does the following:

return ("onecell");

Thats wrong syntax. Do:

return "onecell";

The next mistake:

$(random_cell).append(...);

Random_cell is not a Variable !!! Its a function. Do:

$( random_cell() ).append(...);

Mistake No.3: The clink function adds an eventlistener that adds an eventlistener. So you have to click it twice to make it work...

Mistake No.4

<img src=img.jpg >

Thats wrong HTML. Do:

<img src='img.jpg'>

eisbehr · Answer 2 · 2016-08-25T14:18:08.203

You can simply use Math.random() to create numbers and then build a little translation for your ids, as you did. But note that your current ids makes no sense. They're inconsistent. I've changed them a bit to be usefull.

Also note, that your array in random_cell is called cells, but in your random creation you uses cell. This will not work too.

function random_cell() {
    var cells = ["zero","one","two"];
    var length = cells.length;
  
    return ("#" + cells[Math.floor(Math.random()*length)] + 
            "_" + cells[Math.floor(Math.random()*length)]);
}

setInterval(function() {
    var id = random_cell();

    $("td").removeClass("highlight");
    $(id).addClass("highlight")
}, 500);

.highlight {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td id="zero_zero">1</td>
    <td id="one_zero">2</td>
    <td id="two_zero">3</td>
  </tr>
  <tr>
    <td id="zero_one">4</td>
    <td id="one_one">5</td>
    <td id="two_one">6</td>
  </tr>
  <tr>
    <td id="zero_two">7</td>
    <td id="one_two">8</td>
    <td id="two_two">9</td>
  </tr>
</table>

Yes, but with his ids he will never get a random cell. Thy are inconsistent. @Jonasw — eisbehr, Aug 25 '16 at 14:13

how can i randomly select a cell in my TIC TAC TOE

2 Answers2