John John - 1 year ago 74
HTML Question

Swapping values between cells in html Javascript tables

I've written a code that has a 4x4 table with numbers 1-15 in each cell plus "empty" in one cell.

When I click any adjacent cell (above, left, right or below) to "empty", it swaps the two value. It seems to work well in the middle 2 rows but not the top and bottom row. Can anyone point out the problem?

<script type="text/javascript">

var test = 0;
var startNumber = 0;
var arrayNumbers = new Array()

for (i = 0; i < 16; ++i) {
if (i == 15) { arrayNumbers[i] = "empty"; }
else {
++startNumber;
arrayNumbers[i] = startNumber
}
}

shuffle(arrayNumbers);

document.write("<table id = \"table1\" border = \"1\">")

for (k = 0; k < 4; ++k) {
document.write("<tr>")
for (i = 0; i < 4; ++i) {
document.write("<td>" + arrayNumbers[test] + "</td>");
++test
}
document.write("</tr>")
}

document.write("</table>")
// Table Made

function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;

// While there remain elements to shuffle...
while (0 !== currentIndex) {

// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;

// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}

return array;
}

var table = document.getElementById('table1'),
cells = table.getElementsByTagName('td');

var i = 0, len = cells.length

for (var i = 0, len = cells.length; i < len; i++) {
cells[i].onclick = function (index) {

return function () {
if (cells[index - 1].innerHTML == "empty" && index !== 4 && index !== 8 && index !== 12) {
cells[index - 1].innerHTML = cells[index].innerHTML;
cells[index].innerHTML = "empty";
}
else if (cells[index + 1].innerHTML == "empty" && index !== 3 && index !== 7 && index !== 11) {
cells[index + 1].innerHTML = cells[index].innerHTML;
cells[index].innerHTML = "empty";
}
if (cells[index - 4].innerHTML == "empty") {
cells[index - 4].innerHTML = cells[index].innerHTML;
cells[index].innerHTML = "empty";
}
if (cells[index + 4].innerHTML == "empty") {
cells[index + 4].innerHTML = cells[index].innerHTML;
cells[index].innerHTML = "empty";
}
}

}
(i)
}

</script>

Answer Source

Looks to me like the issue is checking elements in the array which don't exist throwing an error. i.e. you will call using your method index-4 = cells[-1] when someone clicks on box 3. I would suspect all your edges would be susceptible to errors.

In each loop you could simply check the bounding condition as well:

return function () {
    if ((index-1 >= 0) 
           && cells[index - 1].innerHTML == "empty" 
           && index !== 4 
           && index !== 8 
           && index !== 12) {
        cells[index - 1].innerHTML = cells[index].innerHTML;
        cells[index].innerHTML = "empty";
    }
    else if ((index+1<=15) 
           && cells[index + 1].innerHTML == "empty" 
           && index !== 3 
           && index !== 7 
           && index !== 11) {
        cells[index + 1].innerHTML = cells[index].innerHTML;
        cells[index].innerHTML = "empty";
    }
    ...
}

Doing the same for your +/- 4 as well. That should at least get you closer. Also I would recommend installing something you can use to debug your javascript (Firebug is awesome), as this error would have been apparent quickly.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download