Question

我正在进行一项任务，以填充网页的表格数据单元格，这些图片会在点击交换位置移动一个英雄＆＃34;平铺到＃34;赢得＆＃34;瓦。 onClick将单元格位置传递给doClick方法，该方法将确保切换交换不在表格之外。然后将表格单元格的行和列值传递给交换方法以交换两个图块的位置。但是，当我单击表的第1行，第0行时，doClick行if (top != -1 && cells[top][col].innerHTML == "<img src=../images/mage.jpg>")永远不会计算为true。仅当将img scr元素传递到表位置时才会发生这种情况。当我只用字母或数字替换而不用img src元素替换时，这种方法有效。任何建议都将不胜感激。

＆＃13;

//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>";
}

＆＃13;

<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>

＆＃13;

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">'){}

你也可以使用\n作为@NewToJS提到

JavaScript数组的数组没有交换图像onClick

1 个答案: