javascript - how could I map the divs to a two dimensional array tictactoe game -

i have tic-tac-toe game implement using 2 dimensional array. right i'm using simple array , works fine. think easier implement using 2 dimensional array, take advantage of loops when checking winners , other things.

my problem can find way map div clicked index in 2 dim array. example if user clicks on 3rd div of second row on ui, how map 2darray[1][2] (the second subarray index 2)? thanks.

hope explained well. interested in looking @ code here's codepen of tic-tac-toe: https://codepen.io/zentech/pen/xlrzgr

var xplayer = "x";  var oplayer = "o";  var turn = "x";  var board = new array(9);  var message = document.getelementbyid("message");    $(document).ready(function() {    $(".square").click(function() {      var sqrid = $(this).attr("id");      playermove(sqrid);      if (checkwinners()) {        message.innerhtml = "message: " + turn + " wins!";        return;      }      if (checkboard()) {        message.innerthml = "message: " + turn + " move";      } else {        message.innerhtml = "message: it's draw!";      }      turn = (turn == 'x') ? 'o' : 'x';    });      $(".resetgame").click(function() {      $(".square").text("");      $("#message").text("message: ");      turn = "x";      board = new array(9);    });  });    //getting user move , output board  function playermove(sqrid) {    console.log("player move: " + $('#' + sqrid).attr("id") + " " + turn);    if ($('#' + sqrid).text() == "") {      $('#' + sqrid).text(turn);      board[sqrid] = turn;    } else {      console.log("error!");      message.innerhtml = "message: wrong move!..."      return;    }  }    //checking winning combinations  function checkwinners() {    console.log(board[1]);    //checking rows    if (board[0] != undefined && board[0] == board[1] && board[1] == board[2]) {      return true;    } else if (board[3] != undefined && board[3] == board[4] && board[4] == board[5]) {      return true;    } else if (board[6] != undefined && board[6] == board[7] && board[7] == board[8]) {      return true;    }      //checking columns    else if (board[0] != undefined && board[0] == board[3] && board[6] == board[8]) {      return true;    } else if (board[1] != undefined && board[1] == board[4] && board[4] == board[7]) {      return true;    } else if (board[2] != undefined && board[2] == board[5] && board[5] == board[8]) {      return true;    }      //checking across    else if (board[0] != undefined && board[0] == board[4] && board[4] == board[8]) {      return true;    } else if (board[2] != undefined && board[2] == board[4] && board[4] == board[6]) {      return true;    } else {      return false;    }  }    /* checking if there's more room play, if not      it's draw'*/  function checkboard() {    (var = 0; < board.length; i++) {      // console.log(board[i]);      if (board[i] == undefined) {        return true;      }    }    return false;  }

body {    background-color: #999;    font-family: serif, verdana;  }    h1 {    font-size: 50px;  }    h2 {    margin-bottom: 30px;  }    .container {    margin: 0 auto;    text-align: center;  }    .row>div {    margin: 2px;    border: solid 1px black;    display: inline-block;    font-size: 35px;    width: 50px;    height: 50px;    text-align: center;    padding: 0px;    vertical-align: top;    line-height: 50px;  }    #message {    /* display: inline-block; */    text-align: center;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="container">    <div class="header">      <h1>tictactoe</h1>      <h2>you're playing against computer!</h2>    </div>    <div class="tictactoe">      <div class="row">        <div id="0" class="square"></div>        <div id="1" class="square"></div>        <div id="2" class="square"></div>      </div>      <div class="row">        <div id="3" class="square"></div>        <div id="4" class="square"></div>        <div id="5" class="square"></div>      </div>      <div class="row">        <div id="6" class="square"></div>        <div id="7" class="square"></div>        <div id="8" class="square"></div>      </div>    </div>    <div class="controls">      <h2 id="message">message:</h2>      <a href="#" class="resetgame">        <h3>reset game</h3      </a>    </div>  </div>

to go 1d index 2d coordinate, can use these "formula's":

• row = math.floor(index / row_size)
• col = index % row_size(using remainder operator (%))

to go row , column 1d index, can use:

• index = row * row_size + col

/* indexes go left right (row), rows go top bottom        [         0, 1, 2        3, 4, 5        6, 7, 8      ]    */    const row_size = 3;    const rowforindex = function(index) {    return math.floor(index / row_size);  }    const columnforindex = function(index) {    return index % row_size;  }    console.log([0,1,2,3,4,5,6,7,8].map(    => `index: ${i}, row: ${rowforindex(i)}, col: ${columnforindex(i)}`)  );