Javascript交换值答案

【问题标题】：Javascript swapping valuesJavascript交换值
【发布时间】：2016-10-07 23:36:13
【问题描述】：

我需要能够通过一个随机的 3 x 3 矩阵并检查数字是否按顺序排列（即顶行是 1-3，中间是 4-6，底部是 7-9）。到目前为止，我在 JS 中编写了这个函数：

function winningorder(topleft, topcenter, topright, centerleft, centercenter, centerright, bottomleft, bottomcenter, bottomright){
if(document.getElementById(topleft).innerHTML = 1 && document.getElementById(topcenter).innerHTML = 2 && document.getElementById(topright).innerHTML = 3 && document.getElementById(centerleft).innerHTML = 4 && document.getElementById(centercenter).innerHTML = 5 && document.getElementById(centerright).innerHTML = 6 &&document.getElementById(bottomleft).innerHTML = 7 && document.getElementById(bottomcenter).innerHTML = 8 && document.getElementById(bottomright).innerHTML = 9){
    setTimeout(function(){ alert("Well Done!"); }, 250);
}

我不知道是否需要将所有位置（每个单元格的 HTML id）作为参数，所以这是我的第一个问题。其次，我会将我的函数放在 HTML 代码中的什么位置。代码是：

<table border=1>
<tr class="numberrow">
    <td id="topleft" class="numbertile" onclick="processclick(this.id)" onchange=="winningorder(id)" ></td>
    <td id="topcenter" class="numbertile" onclick="processclick(this.id)" onchange=="winningorder(id)"></td>
    <td id="topright" class="numbertile" onclick="processclick(this.id)" onchange=="winningorder(id)"></td>
</tr>
<tr class="numberrow">
    <td id="centerleft" class="numbertile" onclick="processclick(this.id)" onchange=="winningorder(id)"></td>
    <td id="centercenter" class="numbertile" onclick="processclick(this.id)" onchange=="winningorder(id)"></td>
    <td id="centerright" class="numbertile" onclick="processclick(this.id)" onchange=="winningorder(id)"></td>
</tr>
<tr class="numberrow">
    <td id="bottomleft" class="numbertile" onclick="processclick(this.id)" onchange=="winningorder(id)"></td>
    <td id="bottomcenter" class="numbertile" onclick="processclick(this.id)" onchange=="winningorder(id)"></td>
    <td id="bottomright" class="numbertile" onclick="processclick(this.id)" onchange=="winningorder(id)"></td>
</tr>

我的第一个方法是使用 onchange 事件并运行该函数，但这不起作用。感谢您的帮助！

【问题讨论】：

将document.getElementById(tileId) 放入一个全局变量中，并在else 块中使用它。
因为单击的单元格似乎已经是全局的，而不是将 innerHTML 存储在 clickedcell 中，而是存储元素（为简单起见，您的 if 将是 if(!clickedcell)） - 其余的应该自己编写
但是如果我想改变单元格的内部（单元格中的数字），我不需要将那个数字存储在某个地方吗？或者我该如何准确地编写该代码，我仍然卡住了
我遇到的全新问题，解决了我的旧问题，感谢@JaromandaX 的任何帮助
@Barmar 你也是

标签： javascript arrays function matrix swap

【解决方案1】：

不知道是否需要把所有位置（每个单元格的HTML id）作为参数

不，您不必这样做。您将在回调函数 (processclick) 中收到带有触发特定事件 (event.target) 的元素的事件对象。

function processclick(event) {
  var targetId = event.target.id;
}

其次，我会将我的函数放在 HTML 代码中的什么位置。代码是：

很难说你想达到什么目标，所以这个答案可能会被编辑，但我猜你是在服务器上渲染你的网格，而在 javascript 中你试图验证它是否有效。如果是这样，最简单的方法是将 javascript 代码放在 html 表格代码之后。

完整示例（我更喜欢代码可读性而不是性能）：

<html>
  <head>
    <style>
      .numbertile {
        height: 5em;
        width: 5em;
      }
    </style>
  </head>
  <body>
  <table border=1>
    <tr class="numberrow">
        <td id="topleft" class="numbertile">1</td>
        <td id="topcenter" class="numbertile">2</td>
        <td id="topright" class="numbertile">3</td>
    </tr>
    <tr class="numberrow">
        <td id="centerleft" class="numbertile">4</td>
        <td id="centercenter" class="numbertile">5</td>
        <td id="centerright" class="numbertile">6</td>
    </tr>
    <tr class="numberrow">
        <td id="bottomleft" class="numbertile">7</td>
        <td id="bottomcenter" class="numbertile">8</td>
        <td id="bottomright" class="numbertile">9</td>
    </tr>
  </table>
  <script>
    function winningorder() {
      //[id, innerHTML]
      var winningMap = {
        topleft: 1,
        topcenter: 2,
        topright: 3,
        centerleft: 4,
        centercenter: 5,
        centerright: 6,
        bottomleft: 7,
        bottomcenter: 8,
        bottomright: 9
      };
      var tilesEl = document.getElementsByClassName('numbertile');
      var isDone = Array.prototype.slice.call(
        tilesEl, 0
      ).every(function (el) {
        // the every() method tests whether all elements in the array pass
        // the test implemented by the provided function.
        return winningMap[el.id] === Number(el.innerHTML);
      });
      if (isDone) {
        setTimeout(function(){ alert("Well Done!"); }, 250);
      } else {
        setTimeout(function(){ alert("Try again!"); }, 250);
      }
    }
    winningorder();
  </script>
  </body>
</html>

【讨论】：