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>

It's unclear what you exactly want to do with these variables — hindmost
– hindmost, Commented Nov 29, 2016 at 19:42
@hindmost I want to create a 2D array of the variables. If the first time I click on the white cell, the variable is [2,3], the next time I click on it, the variable is [3,3]. I want a 2D array of [[2,3],[3,3]] — Suhan Gui
– Suhan Gui, Commented Nov 29, 2016 at 19:44

kukkuz · Accepted Answer · 2016-11-30 02:59:48Z

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>

Collectives™ on Stack Overflow

Continuously adding arrays to a 2D array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related