Continuously adding arrays to a 2D array

Question

Every time I click on a cell in a grid, it logs an array of [rows,column] of the cell into a variable, either bla (for black) or whi (for white). However, the next time I click on a cell, it changes the variable. For example, I click on a cell and variable whi is [1,2] then I click on another cell, variable bla is [2,2] and after that, I click on a third cell and variable whi is changed from [1,2] (from the original click) to [3,2]. (I made up random numbers for this). I want to create two 2D arrays, one for the variable bla and one for the variable whi. Using my example, one of the 2D arrays should be [[1,2],[3,2]] (for the white cells) and the other one should be [[2,2]] (for the black cells)

Test out the code:

 var white=true; function generateGrid( rows, cols ) { var grid = "<table>"; for ( row = 1; row <= rows; row++ ) { grid += "<tr>"; for ( col = 1; col <= cols; col++ ) { grid += "<td></td>"; } grid += "</tr>"; } return grid; } $( "#tableContainer" ).append( generateGrid( 10, 10) ); $( "td" ).click(function() { $(this).css('cursor','default'); var index = $( "td" ).index( this ); var row = Math.floor( ( index ) / 10) + 1; var col = ( index % 10) + 1; var $td = $(this); if ($td.data('clicked')) return; if (white===true){ var whi=[row,col]; //I want to log the array for whi into a 2D array console.log("white coord is "+whi); } else { var bla=[row,col]; //I want to log this array into another 2D array console.log("black coord is "+bla); } $td.data('clicked', true); $td.css('background-color', white ? 'white' : 'black'); white = !white; }); 

 html{ background-color:#7189ea; } td { border: 1px solid; width: 25px; height: 25px; border-radius:100%; } table { border-collapse: collapse; } 

 <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div id="tableContainer"></div> 

Answer 1

Initialize whi and bla as arrays and push [row,col] to them - see demo below:

 var white = true; var whi = []; var bla = []; function generateGrid(rows, cols) { var grid = "<table>"; for (row = 1; row <= rows; row++) { grid += "<tr>"; for (col = 1; col <= cols; col++) { grid += "<td></td>"; } grid += "</tr>"; } return grid; } $("#tableContainer").append(generateGrid(10, 10)); $("td").click(function() { $(this).css('cursor', 'default'); var index = $("td").index(this); var row = Math.floor((index) / 10) + 1; var col = (index % 10) + 1; var $td = $(this); if ($td.data('clicked')) return; if (white === true) { whi.push([row, col]); } else { bla.push([row, col]); } $td.data('clicked', true); $td.css('background-color', white ? 'white' : 'black'); white = !white; }); $('#getarr').click(function(){ console.log("white arr: ", whi); console.log("black arr: ", bla); }); 

 html { background-color: #7189ea; } td { border: 1px solid; width: 25px; height: 25px; border-radius: 100%; } table { border-collapse: collapse; } 

 <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div id="tableContainer"></div> <button id="getarr">Get array</button>