JavaScript array of array not swapping images onClick

Question

I'm working on an assignment to fill the table data cells of a webpage with images that will on click swap position moving a "hero" tile to a "winning" tile. The onClick passes the cell location to a doClick method that will make sure the tile swap is not outside of the table. The table cell's row and column value is then passed to a swap method to trade the position of the two tiles. However when I click on row 1, col 0 of the table, the doClick line if (top != -1 && cells[top][col].innerHTML == "") never evaluates to true. This only happens when passing the img scr element to the table position. This works when I just substitute a letter or number but not with the img src element. Any suggestion would be appreciated.

//This is called in the html body tag to setup the array of arrays for js
function setup() {
  cells = new Array(
    [
      document.getElementById("cell00"),
      document.getElementById("cell01"),
      document.getElementById("cell02"),
      document.getElementById("cell03"),
      document.getElementById("cell04")
    ], [
      document.getElementById("cell10"),
      document.getElementById("cell11"),
      document.getElementById("cell12"),
      document.getElementById("cell13"),
      document.getElementById("cell14")
    ], [
      document.getElementById("cell20"),
      document.getElementById("cell21"),
      document.getElementById("cell22"),
      document.getElementById("cell23"),
      document.getElementById("cell24")
    ], [
      document.getElementById("cell30"),
      document.getElementById("cell31"),
      document.getElementById("cell32"),
      document.getElementById("cell33"),
      document.getElementById("cell34")
    ], [
      document.getElementById("cell40"),
      document.getElementById("cell41"),
      document.getElementById("cell42"),
      document.getElementById("cell43"),
      document.getElementById("cell44")
    ]
  );

  placeNumbers(); //call function to place values in cells
}

function placeNumbers() {

  for (var rows = 0; rows < 5; rows++) //reads each element of number array into cells array
  {
    for (var cols = 0; cols < 5; cols++) {

      if ((rows == 0) && (cols == 0)) {
        cells[rows][cols].innerHTML = ""; //this holds position for hero and inserts image
        cols++;
      }
      if ((rows == 4) && (cols == 4)) {
        cells[rows][cols].innerHTML = ""; //this holds position for treasure and inserts image
        break;
      } else {
        cells[rows][cols].innerHTML = "";
      }

    }
  }

}

function doClick(row, col) {
  var top = row - 1;
  var bottom = row + 1;
  var left = col - 1;
  var right = col + 1;
  swapped = false;
  if (top != -1 && cells[top][col].innerHTML == "")
    swap(cells[row][col], cells[top][col]);
  else if (right != 5 && cells[row][right].innerHTML == "")
    swap(cells[row][col], cells[row][right]);
  else if (bottom != 5 && cells[bottom][col].innerHTML == "")
    swap(cells[row][col], cells[bottom][col]);
  else if (left != -1 && cells[row][left].innerHTML == "")
    swap(cells[row][col], cells[row][left]);
  else alert("Illegal move.");
}

function swap(firstCell, secondCell) {
  swapped = true;
  secondCell.innerHTML = firstCell.innerHTML;
  firstCell.innerHTML = "";
}


  You can move your Champion into any surrounding empty tile by clicking on that empty tile. The only moves allowed are up, down, right, or left. Diagonal moves are not allowed. The object is to get to the end of the maze and save Azeroth.

Neji Soltani · Accepted Answer

As the edit I have done some checks
The innerHTML condition always return false so you have to log its value to check the correct value.

InnerHTML returns

so the condition should be

if (top != -1 && cells[top][col].innerHTML == ''){}

You can also use as @NewToJS mentioned

JavaScript array of array not swapping images onClick

Answers (1)

Related Questions