Блог

Главная - Вопросы по программированию - Обмен значениями Javascript

Обмен значениями Javascript

#javascript #arrays #function #matrix #swap

#javascript #массивы #функция #матрица #обмен

Вопрос:

Мне нужно иметь возможность просматривать рандомизированную матрицу 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 amp;amp; document.getElementById(topcenter).innerHTML = 2 amp;amp; document.getElementById(topright).innerHTML = 3 amp;amp; document.getElementById(centerleft).innerHTML = 4 amp;amp; document.getElementById(centercenter).innerHTML = 5 amp;amp; document.getElementById(centerright).innerHTML = 6 amp;amp;document.getElementById(bottomleft).innerHTML = 7 amp;amp; document.getElementById(bottomcenter).innerHTML = 8 amp;amp; document.getElementById(bottomright).innerHTML = 9){
    setTimeout(function(){ alert("Well Done!"); }, 250);
}

Я не знаю, нужно ли мне указывать все местоположения (HTML-идентификатор каждой ячейки) в качестве параметров, так что это мой первый вопрос. Во-вторых, куда бы я поместил свою функцию в 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 и запустить функцию, но это не работает. Спасибо за любую помощь!

Комментарии:

1. Поместите document.getElementById(tileId) в глобальную переменную и используйте ее в else блоке.

2. поскольку выбранная ячейка уже является глобальной, вместо того, чтобы хранить innerHTML в clickedcell, сохраните элемент (и ваш if будет if(!clickedcell) для простоты) — остальное должно быть написано само

3. но если я пытаюсь изменить внутреннюю часть ячейки (число в ячейке), разве мне не нужно было бы где-то хранить это число? или как мне точно написать этот код, я все еще застрял

4. Совершенно новая проблема, с которой я столкнулся, решил мою старую, был бы признателен за любую помощь @JaromandaX

5. @Barmar ты тоже

Ответ №1:

Я не знаю, нужно ли мне указывать все местоположения (идентификатор HTML каждой ячейки) в качестве параметров

Нет, вам не нужно. Вы получите объект события с элементом, который вызвал определенное событие ( event.target ) в вашей функции обратного вызова (processclick).

 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>