Question

我需要能够通过一个随机的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事件并运行该功能，但这不起作用。谢谢你的帮助！

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

Javascript交换值

1 个答案: