Trying to implement my movement with left down right and up arrow keys for 15 puzzle game

I need help with fixing my movement code. I am not so javascript friendly. I am just using the old fashion table technique and javascript. I cannot use any jquery or other sources. Here is the code:

<html>
<head>
<style>
table, td {
    border:  solid black;
    text-align: center;
    background-color: #DCDCDC;
}

td {
    width: 20px;

}


</style>


<script>

var bposr =3; // blank position : row
var bposc=3;  // blank position : column


function keypress() {
var ieKey = event.keyCode;



     if (ieKey == 40 && bposr!=0){ // for moving down
        temp= document.getElementById("myTable").rows[bposr-1].cells[bposc].innerHTML;
        document.getElementById("myTable").rows[bposr-1].cells[bposc].innerHTML=document.getElementById("myTable").rows[bposr].cells[bposc].innerHTML;
        document.getElementById("myTable").rows[bposr].cells[bposc].innerHTML=temp;
        document.getElementById("myTable").rows[bposr].cells[bposc].style.backgroundColor='#DCDCDC';
       document.getElementById("myTable").rows[bposr-1].cells[bposc].style.backgroundColor='#ffffff';
        bposr--;
   }

    else if (ieKey == 37 && bposc!=1){  // for moving right
        temp= document.getElementById("myTable").rows[bposr].cells[bposc+1].innerHTML;
        document.getElementById("myTable").rows[bposr].cells[bposc+1].innerHTML=document.getElementById("myTable").rows[bposr].cells[bposc].innerHTML;
        document.getElementById("myTable").rows[bposr].cells[bposc].innerHTML=temp;
        document.getElementById("myTable").rows[bposr].cells[bposc].style.backgroundColor='#DCDCDC';
       document.getElementById("myTable").rows[bposr].cells[bposc+1].style.backgroundColor='#ffffff';
        bposc++;

    }

    else if (ieKey == 39 && bposc!=1){  // for moving left
        temp= document.getElementById("myTable").rows[bposr].cells[bposc+1].innerHTML;
        document.getElementById("myTable").rows[bposr].cells[bposc+1].innerHTML=document.getElementById("myTable").rows[bposr].cells[bposc].innerHTML;
        document.getElementById("myTable").rows[bposr].cells[bposc].innerHTML=temp;
        document.getElementById("myTable").rows[bposr].cells[bposc].style.backgroundColor='#DCDCDC';
       document.getElementById("myTable").rows[bposr].cells[bposc+1].style.backgroundColor='#ffffff';
        bposc++;

    }

else if (ieKey == 38 && bposr!=0){ // for moving down
        temp= document.getElementById("myTable").rows[bposr-1].cells[bposc].innerHTML;
        document.getElementById("myTable").rows[bposr-1].cells[bposc].innerHTML=document.getElementById("myTable").rows[bposr].cells[bposc].innerHTML;
        document.getElementById("myTable").rows[bposr].cells[bposc].innerHTML=temp;
        document.getElementById("myTable").rows[bposr].cells[bposc].style.backgroundColor='#DCDCDC';
       document.getElementById("myTable").rows[bposr-1].cells[bposc].style.backgroundColor='#ffffff';
        bposr--;
   }

}

function start(){
                document.onkeydown = keypress;
                }
</script>

</head>


<body onLoad="start()">
<center>
<table id="myTable">


  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>

  <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>

  <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>

  <tr>

    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td style="background-color:white;"></td>
  </tr>
</table>
<br> 




</body>
</html>

Solution

You have some logic errors in the movement conditions, besides that your code works just fine.

var Table = document.getElementById("myTable");

var bposr =3; // blank position : row
var bposc=3;  // blank position : column

function keypress(ieKey) {

	var ieKey = event.keyCode;

	var Table = document.getElementById("myTable");

	console.log(Table);

	console.log(ieKey);

	if (ieKey == 40 && bposr != 0){ // for moving down

		console.log(bposr);

		temp = Table.rows[bposr - 1].cells[bposc].innerHTML;
		Table.rows[bposr - 1].cells[bposc].innerHTML = Table.rows[bposr].cells[bposc].innerHTML;
		Table.rows[bposr].cells[bposc].innerHTML = temp;
		Table.rows[bposr].cells[bposc].style.backgroundColor = '#DCDCDC';
		Table.rows[bposr - 1].cells[bposc].style.backgroundColor = '#ffffff';
		bposr--;

	} else if (ieKey == 39 && bposc != 0){  // for moving right

		console.log(bposc);

		temp = Table.rows[bposr].cells[bposc - 1].innerHTML;
    Table.rows[bposr].cells[bposc - 1].innerHTML = Table.rows[bposr].cells[bposc].innerHTML;
    Table.rows[bposr].cells[bposc].innerHTML = temp;
    Table.rows[bposr].cells[bposc].style.backgroundColor = '#DCDCDC';
    Table.rows[bposr].cells[bposc - 1].style.backgroundColor = '#ffffff';
    bposc--;

	} else if (ieKey == 37 && bposc != 3){  // for moving left

		console.log(bposc);

		temp = Table.rows[bposr].cells[bposc + 1].innerHTML;
    Table.rows[bposr].cells[bposc + 1].innerHTML = Table.rows[bposr].cells[bposc].innerHTML;
    Table.rows[bposr].cells[bposc].innerHTML = temp;
    Table.rows[bposr].cells[bposc].style.backgroundColor = '#DCDCDC';
    Table.rows[bposr].cells[bposc + 1].style.backgroundColor = '#ffffff';
    bposc++;

	} else if (ieKey == 38 && bposr != 3){ // for moving up

		console.log(bposr);

		temp = Table.rows[bposr + 1].cells[bposc].innerHTML;
		Table.rows[bposr + 1].cells[bposc].innerHTML = Table.rows[bposr].cells[bposc].innerHTML;
		Table.rows[bposr].cells[bposc].innerHTML = temp;
		Table.rows[bposr].cells[bposc].style.backgroundColor = '#DCDCDC';
		Table.rows[bposr + 1].cells[bposc].style.backgroundColor = '#ffffff';
		bposr++;

	 }

}

function start(){
	document.onkeydown = keypress;
}

table, td {
		border:  solid black;
		text-align: center;
		background-color: #DCDCDC;
}

td {
		width: 20px;

}

<center>
<table id="myTable">


	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
	</tr>

	<tr>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
	</tr>

	<tr>
		<td>9</td>
		<td>10</td>
		<td>11</td>
		<td>12</td>
	</tr>

	<tr>

		<td>13</td>
		<td>14</td>
		<td>15</td>
		<td style="background-color:white;"></td>
	</tr>
</table>
<br>
</center>