jquery function with if statements not working correctly

Question

I'm trying to create a small game similar to battleship or minesweeper. I'm attempting to create if click functions with if statements that will change the color of divs depending on the value stored in a location within an array. However, after writing the code, the div always changes to the color associated with something being stored in the array, when it should change to a different color. I've checked and the values in the array are correct, so it appears to be something wrong with the if statement. My first time trying to use jQuery, so it may be something really simple that I'm unaware of. Any help is appreciated!

Code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <style>
  .toggle {
    width: 50px;
    height: 50px;
    background: #33ccff;
  }
  .toggle.grey{background-color: #D3D3D3;
  transition: all 1s;}
  .toggle.red{background-color: #FF0000;
  transition: all 1s;}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>


<table>
<tr>
<td><div class="toggle" id="1a"></div></td>
<td><div class="toggle" id="1b"></div></td>
<td><div class="toggle" id="1c"></div></td>
<td><div class="toggle" id="1d"></div></td>
<td><div class="toggle" id="1e"></div></td>
<td><div class="toggle" id="1f"></div></td>
<td><div class="toggle" id="1g"></div></td>
<td><div class="toggle" id="1h"></div></td>
<td><div class="toggle" id="1i"></div></td>
<td><div class="toggle" id="1j"></div></td>
</tr>
<tr>
<td><div class="toggle" id="2a"></div></td>
<td><div class="toggle" id="2b"></div></td>
<td><div class="toggle" id="2c"></div></td>
<td><div class="toggle" id="2d"></div></td>
<td><div class="toggle" id="2e"></div></td>
<td><div class="toggle" id="2f"></div></td>
<td><div class="toggle" id="2g"></div></td>
<td><div class="toggle" id="2h"></div></td>
<td><div class="toggle" id="2i"></div></td>
<td><div class="toggle" id="2j"></div></td>
</tr><tr>
<td><div class="toggle" id="3a"></div></td>
<td><div class="toggle" id="3b"></div></td>
<td><div class="toggle" id="3c"></div></td>
<td><div class="toggle" id="3d"></div></td>
<td><div class="toggle" id="3e"></div></td>
<td><div class="toggle" id="3f"></div></td>
<td><div class="toggle" id="3g"></div></td>
<td><div class="toggle" id="3h"></div></td>
<td><div class="toggle" id="3i"></div></td>
<td><div class="toggle" id="3j"></div></td>
</tr><tr>
<td><div class="toggle" id="4a"></div></td>
<td><div class="toggle" id="4b"></div></td>
<td><div class="toggle" id="4c"></div></td>
<td><div class="toggle" id="4d"></div></td>
<td><div class="toggle" id="4e"></div></td>
<td><div class="toggle" id="4f"></div></td>
<td><div class="toggle" id="4g"></div></td>
<td><div class="toggle" id="4h"></div></td>
<td><div class="toggle" id="4i"></div></td>
<td><div class="toggle" id="4j"></div></td>
</tr><tr>
<td><div class="toggle" id="5a"></div></td>
<td><div class="toggle" id="5b"></div></td>
<td><div class="toggle" id="5c"></div></td>
<td><div class="toggle" id="5d"></div></td>
<td><div class="toggle" id="5e"></div></td>
<td><div class="toggle" id="5f"></div></td>
<td><div class="toggle" id="5g"></div></td>
<td><div class="toggle" id="5h"></div></td>
<td><div class="toggle" id="5i"></div></td>
<td><div class="toggle" id="5j"></div></td>
</tr><tr>
<td><div class="toggle" id="6a"></div></td>
<td><div class="toggle" id="6b"></div></td>
<td><div class="toggle" id="6c"></div></td>
<td><div class="toggle" id="6d"></div></td>
<td><div class="toggle" id="6e"></div></td>
<td><div class="toggle" id="6f"></div></td>
<td><div class="toggle" id="6g"></div></td>
<td><div class="toggle" id="6h"></div></td>
<td><div class="toggle" id="6i"></div></td>
<td><div class="toggle" id="6j"></div></td>
</tr><tr>
<td><div class="toggle" id="7a"></div></td>
<td><div class="toggle" id="7b"></div></td>
<td><div class="toggle" id="7c"></div></td>
<td><div class="toggle" id="7d"></div></td>
<td><div class="toggle" id="7e"></div></td>
<td><div class="toggle" id="7f"></div></td>
<td><div class="toggle" id="7g"></div></td>
<td><div class="toggle" id="7h"></div></td>
<td><div class="toggle" id="7i"></div></td>
<td><div class="toggle" id="7j"></div></td>
</tr><tr>
<td><div class="toggle" id="8a"></div></td>
<td><div class="toggle" id="8b"></div></td>
<td><div class="toggle" id="8c"></div></td>
<td><div class="toggle" id="8d"></div></td>
<td><div class="toggle" id="8e"></div></td>
<td><div class="toggle" id="8f"></div></td>
<td><div class="toggle" id="8g"></div></td>
<td><div class="toggle" id="8h"></div></td>
<td><div class="toggle" id="8i"></div></td>
<td><div class="toggle" id="8j"></div></td>
</tr><tr>
<td><div class="toggle" id="9a"></div></td>
<td><div class="toggle" id="9b"></div></td>
<td><div class="toggle" id="9c"></div></td>
<td><div class="toggle" id="9d"></div></td>
<td><div class="toggle" id="9e"></div></td>
<td><div class="toggle" id="9f"></div></td>
<td><div class="toggle" id="9g"></div></td>
<td><div class="toggle" id="9h"></div></td>
<td><div class="toggle" id="9i"></div></td>
<td><div class="toggle" id="9j"></div></td>
</tr><tr>
<td><div class="toggle" id="10a"></div></td>
<td><div class="toggle" id="10b"></div></td>
<td><div class="toggle" id="10c"></div></td>
<td><div class="toggle" id="10d"></div></td>
<td><div class="toggle" id="10e"></div></td>
<td><div class="toggle" id="10f"></div></td>
<td><div class="toggle" id="10g"></div></td>
<td><div class="toggle" id="10h"></div></td>
<td><div class="toggle" id="10i"></div></td>
<td><div class="toggle" id="10j"></div></td>
</tr>

<script>
$(document).ready(function(){

var row1 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var row2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var row3 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var row4 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var row5 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var row6 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var row7 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var row8 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var row9 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var row10= [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

var coords = [row1, row2, row3, row4, row5, row6, row7, row8, row9, row10];


//place 5 boats on grid
placeBoat();
placeBoat();
placeBoat();
placeBoat();
placeBoat();

console.log(row1 + row2 + row3+ row4+ row5+row6+row7+row8+row9+row10);
function placeBoat() {
var row_num = getRow();
var column_num = getColumn();
console.log("row_num =" + row_num + " column_num = " +column_num);
if (typeof coords[row_num][column_num + 1] == undefined) {
    if ((coords[row_num][column_num] == 0) && (coords[row_num][column_num - 1] == 0)) {
    coords[row_num][column_num] = 1;
    coords[row_num][column_num - 1] = 1;
        }
    }

else if ((coords[row_num][column_num] == 0) && (coords[row_num][column_num + 1] == 0)) {
coords[row_num][column_num] = 1;
coords[row_num][column_num + 1] = 1;

    }


else
    placeBoat();
}

//get a random number between 0 and 9 for row
function getRow() {
var row_num = Math.floor(Math.random()*(9)+0);

return row_num;
}

//get a random number between 0 and 9 for column
function getColumn() {
var column_num = Math.floor(Math.random()*(9-0+1)+0);

return column_num;
}

//Tiles will change color when clicked depending on values in array

$( "#1a" ).click(function() {
if (coords[0][0]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );

});
$( "#1b" ).click(function() {
if (coords[0][1]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#1c" ).click(function() {
if (coords[0][2]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#1d" ).click(function() {
if (coords[0][3]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#1e" ).click(function() {
if (coords[0][4]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#1f" ).click(function() {
if (coords[0][5]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#1g" ).click(function() {
if (coords[0][6]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#1h" ).click(function() {
if (coords[0][7]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#1i" ).click(function() {
if (coords[0][8]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#1j" ).click(function() {
if (coords[0][9]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#2a" ).click(function() {
if (coords[1][0]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#2b" ).click(function() {
if (coords[1][1]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#2c" ).click(function() {
if (coords[1][2]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#2d" ).click(function() {
if (coords[1][3]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#2e" ).click(function() {
if (coords[1][4]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#2f" ).click(function() {
if (coords[1][5]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#2g" ).click(function() {
if (coords[1][6]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#2h" ).click(function() {
if (coords[1][7]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#2i" ).click(function() {
if (coords[1][8]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#2j" ).click(function() {
if (coords[1][9]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#3a" ).click(function() {
if (coords[2][0]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#3b" ).click(function() {
if (coords[2][1]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#3c" ).click(function() {
if (coords[2][2]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#3d" ).click(function() {
if (coords[2][3]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#3e" ).click(function() {
if (coords[2][4]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#3f" ).click(function() {
if (coords[2][5]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#3g" ).click(function() {
if (coords[2][6]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#3h" ).click(function() {
if (coords[2][7]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#3i" ).click(function() {
if (coords[2][8]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#3j" ).click(function() {
if (coords[2][9]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#4a" ).click(function() {
if (coords[3][0]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#4b" ).click(function() {
if (coords[3][1]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#4c" ).click(function() {
if (coords[3][2]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#4d" ).click(function() {
if (coords[3][3]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#4e" ).click(function() {
if (coords[3][4]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#4f" ).click(function() {
if (coords[3][5]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#4g" ).click(function() {
if (coords[3][6]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#4h" ).click(function() {
if (coords[3][7]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#4i" ).click(function() {
if (coords[3][8]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#4j" ).click(function() {
if (coords[3][9]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#5a" ).click(function() {
if (coords[4][0]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#5b" ).click(function() {
if (coords[4][1]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#5c" ).click(function() {
if (coords[4][2]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#5d" ).click(function() {
if (coords[4][3]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#5e" ).click(function() {
if (coords[4][4]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#5f" ).click(function() {
if (coords[4][5]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#5g" ).click(function() {
if (coords[4][6]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#5h" ).click(function() {
if (coords[4][7]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#5i" ).click(function() {
if (coords[4][8]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#5j" ).click(function() {
if (coords[4][9]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#6a" ).click(function() {
if (coords[5][0]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#6b" ).click(function() {
if (coords[5][1]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#6c" ).click(function() {
if (coords[5][2]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#6d" ).click(function() {
if (coords[5][3]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#6e" ).click(function() {
if (coords[5][4]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#6f" ).click(function() {
if (coords[5][5]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#6g" ).click(function() {
if (coords[5][6]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#6h" ).click(function() {
if (coords[5][7]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#6i" ).click(function() {
if (coords[5][8]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#6j" ).click(function() {
if (coords[5][9]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#7a" ).click(function() {
if (coords[6][0]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#7b" ).click(function() {
if (coords[6][1]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#7c" ).click(function() {
if (coords[6][2]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#7d" ).click(function() {
if (coords[6][3]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#7e" ).click(function() {
if (coords[6][4]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#7f" ).click(function() {
if (coords[6][5]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#7g" ).click(function() {
if (coords[6][6]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#7h" ).click(function() {
if (coords[6][7]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#7i" ).click(function() {
if (coords[6][8]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#7j" ).click(function() {
if (coords[6][9]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#8a" ).click(function() {
if (coords[7][0]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#8b" ).click(function() {
if (coords[7][1]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#8c" ).click(function() {
if (coords[7][2]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#8d" ).click(function() {
if (coords[7][3]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#8e" ).click(function() {
if (coords[7][4]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#8f" ).click(function() {
if (coords[7][5]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#8g" ).click(function() {
if (coords[7][6]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#8h" ).click(function() {
if (coords[7][7]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#8i" ).click(function() {
if (coords[7][8]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#8j" ).click(function() {
if (coords[7][9]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#9a" ).click(function() {
if (coords[8][0]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#9b" ).click(function() {
if (coords[8][1]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#9c" ).click(function() {
if (coords[8][2]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#9d" ).click(function() {
if (coords[8][3]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#9e" ).click(function() {
if (coords[8][4]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#9f" ).click(function() {
if (coords[8][5]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#9g" ).click(function() {
if (coords[8][6]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#9h" ).click(function() {
if (coords[8][7]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#9i" ).click(function() {
if (coords[8][8]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#9j" ).click(function() {
if (coords[8][9]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#10a" ).click(function() {
if (coords[9][0]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#10b" ).click(function() {
if (coords[9][1]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#10c" ).click(function() {
if (coords[9][2]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#10d" ).click(function() {
if (coords[9][3]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#10e" ).click(function() {
if (coords[9][4]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#10f" ).click(function() {
if (coords[9][5]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#10g" ).click(function() {
if (coords[9][6]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#10h" ).click(function() {
if (coords[9][7]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});
$( "#10i" ).click(function() {
if (coords[9][8]=0)
  $( this ).toggleClass( "grey" );
else 
    $( this ).toggleClass( "red" );
});

console.log("lower right is: " + coords[9][9]);
$( "#10j" ).click(function() {
if (coords[9][9]=0){
  $( this ).toggleClass( "grey" );}
else {
    $( this ).toggleClass( "red" );}
});
});

</script>

</body>
</html>

Just change your "=" to "==" and it will toggle perfectly

EugenSunic
– EugenSunic

2015-11-02 23:45:11 +00:00
Commented Nov 2, 2015 at 23:45 — EugenSunic
– EugenSunic, Commented Nov 2, 2015 at 23:45

Evan Nudd · Accepted Answer · 2015-11-03 00:56:10Z

1

Keep in mind that toggleClass() does not clear the classes that already exist, they simply add or remove the parameter. Here is a link to the JQuery Documentation https://api.jquery.com/category/manipulation/

I recommend looking into the process of removing a class, then adding the class you want.

The answer your looking for in the if condition is that you used a single = (assignment operator) instead of a == (comparison operator) check your operators and you should be fine.

edited Nov 3, 2015 at 0:56

answered Nov 2, 2015 at 23:41

Evan Nudd

2162 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Evan Nudd Over a year ago

Also I'm foolish and didn't notice you're using '=' sign for comparing operands use ==

Matt Over a year ago

Dangit....That's the second time I've made that mistake lately, thanks for the help and sorry for posting something obvious.

Community · Accepted Answer · 2017-05-23 11:44:32Z

0

Your solution is so complicated I dont know where to begin. The way you have assigned ids to everything and are checking them all the time is a very complicated way to solve your problem. I suggest using a multidimensional array to simplify things. That will make targeting specific table cells easier and that way you can focus more on problems with your program. Your code as it is now is probably very hard to debug. Take a look at this for information on multidimensional arrays:

jQuery Create Multidimensional Array

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Nov 2, 2015 at 23:47

Ishiffman120

3981 silver badge14 bronze badges

Collectives™ on Stack Overflow

jquery function with if statements not working correctly

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related