JavaScript数组数组不交换图像onClick

Question

我正在做一项作业，用图像填充网页的表格数据单元格，这些图像将在点击交换位置时将“英雄”图 block 移动到“获胜”图 block 。 onClick 将单元格位置传递给 doClick 方法，该方法将确保磁贴交换不在表格之外。然后将表格单元格的行和列值传递给交换方法以交换两个图 block 的位置。但是，当我单击表格的第 1 行第 0 列时，doClick 行 if (top != -1 && cells[top][col].innerHTML == "<img src=../images/mage.jpg>")永远不会评估为真。这仅在将 img scr 元素传递到表格位置时发生。当我只替换字母或数字但不替换 img src 元素时，这会起作用。任何建议将不胜感激。

//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 = "<img src=../images/mage.jpg>"; //this holds position for hero and inserts image
        cols++;
      }
      if ((rows == 4) && (cols == 4)) {
        cells[rows][cols].innerHTML = "<img src=../images/treasure.jpg>"; //this holds position for treasure and inserts image
        break;
      } else {
        cells[rows][cols].innerHTML = "<img src=../images/grass.jpg>";
      }

    }
  }

}

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 == "<img src=../images/mage.jpg>")
    swap(cells[row][col], cells[top][col]);
  else if (right != 5 && cells[row][right].innerHTML == "<img src=../images/mage.jpg>")
    swap(cells[row][col], cells[row][right]);
  else if (bottom != 5 && cells[bottom][col].innerHTML == "<img src=../images/mage.jpg>")
    swap(cells[row][col], cells[bottom][col]);
  else if (left != -1 && cells[row][left].innerHTML == "<img src=../images/mage.jpg>")
    swap(cells[row][col], cells[row][left]);
  else alert("Illegal move.");
}

function swap(firstCell, secondCell) {
  swapped = true;
  secondCell.innerHTML = firstCell.innerHTML;
  firstCell.innerHTML = "<img src=../images/mage.jpg>";
}

<div id="content">
  <p>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. </p>
  <table align="center" border="2">
    <tr>
      <td><span onclick="doClick(0,0)" id="cell00" /></td>
      <td><span onclick="doClick(0,1)" id="cell01" /></td>
      <td><span onclick="doClick(0,2)" id="cell02" /></td>
      <td><span onclick="doClick(0,3)" id="cell03" /></td>
      <td><span onclick="doClick(0,4)" id="cell04" /></td>
    </tr>
    <tr>
      <td><span onclick="doClick(1,0)" id="cell10" /></td>
      <td><span onclick="doClick(1,1)" id="cell11" /></td>
      <td><span onclick="doClick(1,2)" id="cell12" /></td>
      <td><span onclick="doClick(1,3)" id="cell13" /></td>
      <td><span onclick="doClick(1,4)" id="cell14" /></td>
    </tr>
    <tr>
      <td><span onclick="doClick(2,0)" id="cell20" /></td>
      <td><span onclick="doClick(2,1)" id="cell21" /></td>
      <td><span onclick="doClick(2,2)" id="cell22" /></td>
      <td><span onclick="doClick(2,3)" id="cell23" /></td>
      <td><span onclick="doClick(2,4)" id="cell24" /></td>
    </tr>
    <tr>
      <td><span onclick="doClick(3,0)" id="cell30" /></td>
      <td><span onclick="doClick(3,1)" id="cell31" /></td>
      <td><span onclick="doClick(3,2)" id="cell32" /></td>
      <td><span onclick="doClick(3,3)" id="cell33" /></td>
      <td><span onclick="doClick(3,4)" id="cell34" /></td>
    </tr>
    <tr>
      <td><span onclick="doClick(4,0)" id="cell40" /></td>
      <td><span onclick="doClick(4,1)" id="cell41" /></td>
      <td><span onclick="doClick(4,2)" id="cell42" /></td>
      <td><span onclick="doClick(4,3)" id="cell43" /></td>
      <td><span onclick="doClick(4,4)" id="cell44" /></td>
    </tr>
  </table>
</div>

Answer 1

作为编辑我做了一些检查
innerHTML 条件始终返回 false，因此您必须记录它的值以检查正确的值。

InnerHTML 返回

<img src="https://cdn.pixabay.com/photo/2017/06/22/20/32/background-2432434_960_720.jpg" width="50">

所以条件应该是

if (top != -1 && cells[top][col].innerHTML == '<img src="https://cdn.pixabay.com/photo/2017/06/22/20/32/background-2432434_960_720.jpg" width="50">'){}

您也可以像@NewToJS 提到的那样使用\n