Jeremy Stone Jeremy Stone - 1 month ago 3
Javascript Question

Javascript Array of Objects as Table data

I'm working on a pure JS 6x6 grid style game in which each grid cell should alternate between 3 colours (one at a time) when clicked once. I'm running into two issues: I'd like to display each cell blank, simply containing the colour, but I can't seem to get this to work without having to display text in the cell.

I'm also trying to figure out a way to "toggle" between three colours. My use of toggle works for two colours, but I'm not quite sure if/how I can add a third option as it seems to work based on true/false.

Is there any way I can display an "empty" cell here? Should I scrap my method of attack for changing colours? Apologies if my code is all over the place, I've been looking at this for too long.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid</title>
<style>
.blue {
background-color: blue;
}
.grey{
background-color:grey;
}
td {
text-align: center;
border: 1px solid black;
padding: 3px;
height: 50px;
width: 50px;
}
table {
border-collapse: collapse;
}
.tile {
cursor: pointer;
}
</style>
</head>
<body>
<script>

//6x6 array
var solutionArray = new Array(6);
solutionArray[0] = new Array(6);
solutionArray[1] = new Array(6);
solutionArray[2] = new Array(6);
solutionArray[3] = new Array(6);
solutionArray[4] = new Array(6);
solutionArray[5] = new Array(6);

//6x6 array
var userArray = new Array(6);
userArray[0] = new Array(6);
userArray[1] = new Array(6);
userArray[2] = new Array(6);
userArray[3] = new Array(6);
userArray[4] = new Array(6);
userArray[5] = new Array(6);

var tile = {colour1:blue, colour2:white, colour3:grey};
var z = "";
var blue = tile.colour1 = "blue";
var white = tile.colour2 = "white";
var grey = tile.colour = "grey";

solutionArray[0][0] = blue;
solutionArray[0][1] = white;
solutionArray[0][2] = blue;
solutionArray[0][3] = blue;
solutionArray[0][4] = white;
solutionArray[0][5] = blue;

solutionArray[1][0] = white;
solutionArray[1][1] = blue;
solutionArray[1][2] = white;
solutionArray[1][3] = blue;
solutionArray[1][4] = blue;
solutionArray[1][5] = white;

solutionArray[2][0] = blue;
solutionArray[2][1] = white;
solutionArray[2][2] = blue;
solutionArray[2][3] = white;
solutionArray[2][4] = white;
solutionArray[2][5] = blue;

solutionArray[3][0] = white;
solutionArray[3][1] = blue;
solutionArray[3][2] = white;
solutionArray[3][3] = white;
solutionArray[3][4] = blue;
solutionArray[3][5] = blue;

solutionArray[4][0] = blue;
solutionArray[4][1] = blue;
solutionArray[4][2] = white;
solutionArray[4][3] = blue;
solutionArray[4][4] = white;
solutionArray[4][5] = white;

solutionArray[5][0] = blue;
solutionArray[5][1] = white;
solutionArray[5][2] = blue;
solutionArray[5][3] = white;
solutionArray[5][4] = blue;
solutionArray[5][5] = white;

//USER ARRAY
userArray[0][0] = blue;
userArray[0][1] = grey;
userArray[0][2] = grey;
userArray[0][3] = grey;
userArray[0][4] = grey;
userArray[0][5] = blue;

userArray[1][0] = grey;
userArray[1][1] = blue;
userArray[1][2] = grey;
userArray[1][3] = grey;
userArray[1][4] = grey;
userArray[1][5] = white;

userArray[2][0] = grey;
userArray[2][1] = grey;
userArray[2][2] = blue;
userArray[2][3] = grey;
userArray[2][4] = white;
userArray[2][5] = grey;

userArray[3][0] = grey;
userArray[3][1] = grey;
userArray[3][2] = grey;
userArray[3][3] = grey;
userArray[3][4] = grey;
userArray[3][5] = grey;

userArray[4][0] = grey;
userArray[4][1] = grey;
userArray[4][2] = white;
userArray[4][3] = grey;
userArray[4][4] = grey;
userArray[4][5] = white;

userArray[5][0] = grey;
userArray[5][1] = grey;
userArray[5][2] = grey;
userArray[5][3] = grey;
userArray[5][4] = blue;
userArray[5][5] = white;

var x = document.createElement("TABLE");
x.setAttribute("id", "gridTable");
document.body.appendChild(x);

for (i = 0; i < 6; i++) {
//output the row tag
var y = document.createElement("TR");
y.setAttribute("id", "row" + i);
document.getElementById("gridTable").appendChild(y)

for (j = 0; j < userArray.length; j++) {

///output the td tag
var z = document.createElement("TD");
if (userArray[i][j] == blue) {
z.setAttribute("class", "blueTile tile blue");
} else if (userArray[i][j] == white) {
z.setAttribute("class", "blueTile tile");
} else if (userArray[i][j] == grey) {
z.setAttribute("class", "blueTile tile grey");
}
var t = document.createTextNode(userArray[i][j]);
z.appendChild(t);
document.getElementById("row" + i).appendChild(z);

}

}

document.querySelector("#gridTable").addEventListener("click", function(event) {
if (event.target.tagName === "TD" && event.target.classList.contains("blueTile")) {
event.target.classList.toggle("blue");
}
});
document.querySelector("#gridTable").addEventListener("click", function(event) {
if (event.target.tagName === "TD" && event.target.classList.contains("blueTile")) {
event.target.classList.toggle("grey");
}
});



</script>

</body>
</html>

Answer
  • First issue: You should add "empty-cells: show" on table tag (this is needed for some of the browsers).
  • Second issue: Just use simple logic. toggle function you are using is not inteded for your goals. Seed the code below. In general the whole code could be optimized a lot.

I have tested that code and both issues are resolved:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid</title>
    <style>
.blue {
  background-color: blue;
}
.grey{
background-color:grey;
}

.white{
background-color:white;
}
td {
  text-align: center;
  border: 1px solid black;
  padding: 3px;
  height: 50px;
  width: 50px;
}
table {
  border-collapse: collapse;
  empty-cells: show;
}
table td {
  cursor: pointer;
}
    </style>
</head>
<body>
    <script>

    //6x6 array
var solutionArray = new Array(6);
solutionArray[0] = new Array(6);
solutionArray[1] = new Array(6);
solutionArray[2] = new Array(6);
solutionArray[3] = new Array(6);
solutionArray[4] = new Array(6);
solutionArray[5] = new Array(6);

    //6x6 array
var userArray = new Array(6);
userArray[0] = new Array(6);
userArray[1] = new Array(6);
userArray[2] = new Array(6);
userArray[3] = new Array(6);
userArray[4] = new Array(6);
userArray[5] = new Array(6);

var tile = {colour1:blue, colour2:white, colour3:grey};
var z = "";
var blue = tile.colour1 = "blue";
var white = tile.colour2 = "white";
var grey = tile.colour = "grey";

solutionArray[0][0] = blue;
solutionArray[0][1] = white;
solutionArray[0][2] = blue;
solutionArray[0][3] = blue;
solutionArray[0][4] = white;
solutionArray[0][5] = blue;

solutionArray[1][0] = white;
solutionArray[1][1] = blue;
solutionArray[1][2] = white;
solutionArray[1][3] = blue;
solutionArray[1][4] = blue;
solutionArray[1][5] = white;

solutionArray[2][0] = blue;
solutionArray[2][1] = white;
solutionArray[2][2] = blue;
solutionArray[2][3] = white;
solutionArray[2][4] = white;
solutionArray[2][5] = blue;

solutionArray[3][0] = white;
solutionArray[3][1] = blue;
solutionArray[3][2] = white;
solutionArray[3][3] = white;
solutionArray[3][4] = blue;
solutionArray[3][5] = blue;

solutionArray[4][0] = blue;
solutionArray[4][1] = blue;
solutionArray[4][2] = white;
solutionArray[4][3] = blue;
solutionArray[4][4] = white;
solutionArray[4][5] = white;

solutionArray[5][0] = blue;
solutionArray[5][1] = white;
solutionArray[5][2] = blue;
solutionArray[5][3] = white;
solutionArray[5][4] = blue;
solutionArray[5][5] = white;

//USER ARRAY
userArray[0][0] = blue;
userArray[0][1] = grey;
userArray[0][2] = grey;
userArray[0][3] = grey;
userArray[0][4] = grey;
userArray[0][5] = blue;

userArray[1][0] = grey;
userArray[1][1] = blue;
userArray[1][2] = grey;
userArray[1][3] = grey;
userArray[1][4] = grey;
userArray[1][5] = white;

userArray[2][0] = grey;
userArray[2][1] = grey;
userArray[2][2] = blue;
userArray[2][3] = grey;
userArray[2][4] = white;
userArray[2][5] = grey;

userArray[3][0] = grey;
userArray[3][1] = grey;
userArray[3][2] = grey;
userArray[3][3] = grey;
userArray[3][4] = grey;
userArray[3][5] = grey;

userArray[4][0] = grey;
userArray[4][1] = grey;
userArray[4][2] = white;
userArray[4][3] = grey;
userArray[4][4] = grey;
userArray[4][5] = white;

userArray[5][0] = grey;
userArray[5][1] = grey;
userArray[5][2] = grey;
userArray[5][3] = grey;
userArray[5][4] = blue;
userArray[5][5] = white;

var x = document.createElement("TABLE");
x.setAttribute("id", "gridTable");
document.body.appendChild(x);

for (i = 0; i < 6; i++) {
  //output the row tag
  var y = document.createElement("TR");
  y.setAttribute("id", "row" + i);
  document.getElementById("gridTable").appendChild(y)

  for (j = 0; j < userArray.length; j++) {

    ///output the td tag
    var z = document.createElement("TD");
    if (userArray[i][j] == blue) {
      z.setAttribute("class", "blue");
    } else if (userArray[i][j] == white) {
      z.setAttribute("class", "white");
    } else if (userArray[i][j] == grey) {
      z.setAttribute("class", "grey");
    }
    document.getElementById("row" + i).appendChild(z);

  }
}

document.querySelector("#gridTable").addEventListener("click", function(event) {
  if(event.target.classList.contains("blue")){
	event.target.className = 'grey';
  }else if(event.target.classList.contains("grey")){
	event.target.className = 'white'
  }else if(event.target.classList.contains("white")){
	event.target.className = 'blue'
  }
});
    </script>
  </body>
</html>

Comments