Как я могу изменить значение переменной между функциями в JS?

avatar
tv_dinner
9 августа 2021 в 04:56
86
3
0

Я пытаюсь поиграть в крестики-нолики. Когда щелкают одно поле, я хочу, чтобы значение var XorO было равно X. Затем я хочу, чтобы значение XorO было равно O для следующего щелчка поля, и так далее. Ниже я включу код, который должен помочь вам лучше понять, чего я пытаюсь добиться.

HTML:

<!DOCTYPE html>
<head>
    <title>tik-tak-toe</title>
    <link rel="stylesheet" href="tik-tak-toe.css">
    <script type="text/javascript" src="tik-tak-toe.js"></script>
</head>
<body>
    <div id="squares">
        <p id="topLeft" class="square" onclick="topLeft()"></p>
        <p id="topCenter" class="square" onclick="topCenter()"></p>
    </div>
</body>

JS:

var topLeftClicked=false;
var topCenterClicked=false;
var XorO="X";
function topLeft(){
    if(!topLeftClicked){
        topLeftClicked=true;
        document.getElementById("topLeft").innerHTML=
        XorO;
        if(XorO=="X"){
            XorO="O";
        }
        if(XorO=="O"){
            XorO="X";
        }
        return XorO;
    }
}
function topCenter(){
    if(!topCenterClicked){
        topCenterClicked=true;
        document.getElementById("topCenter").innerHTML=
        XorO;
        if(XorO=="X"){
            XorO="O";
        }
        if(XorO=="O"){
            XorO="X";
        }
        return XorO;/*this last section of code with the if statements is meant to change the value of XorO between "X" and "O" every time a function is carried out, but needless to say it doesnt work*/
    }
}

Это не код для всей моей игры в крестики-нолики, так как я еще не закончил. Этого должно быть достаточно, чтобы дать вам представление о том, как мой неопытный кодирующий мозг думает, что это должно работать. То, с чем я борюсь, - это изменение верного XorY между «X» и «Y» каждый раз, когда нажимается коробка (я пытаюсь закодировать игру в крестики-нолики). Я попытался сделать это собственной функцией, и как вы видите здесь, я пытался сделать это внутри выполняемой функции, но ни одна из них не может сделать это, поэтому другая функция распознает значение XorO как то, что я хочу. Пожалуйста, помогите!

Источник

Ответы (3)

avatar
Salvino
9 августа 2021 в 06:09
0

Это потому, что вы использовали два условия if, которые дважды изменяют значение в каждой функции. Код следует изменить на if-else.

Посмотрите на объяснение ниже:

if (XorO == "X") {
  XorO = "O";
}

// At this point the value will be 'O' and hence it will enter the next `if`
// condition and it will revert back to 'X'

if (XorO == "O") {
  XorO = "X";
}

Вы также можете переместить свой код для переключения значений X или O в отдельную функцию, чтобы его можно было использовать повторно. Кроме того, прекратите использовать var для объявления переменных, используйте const или let в соответствии с новыми стандартами ES6.

Следовательно, ваш код должен выглядеть следующим образом:

let topLeftClicked = false;
let topCenterClicked = false;
let XorO = "X";

function topLeft() {
  if (!topLeftClicked) {
    topLeftClicked = !topLeftClicked;
    document.getElementById("topLeft").innerHTML = XorO;
    toggleXO();
  }
}

function topCenter() {
  if (!topCenterClicked) {
    topCenterClicked = true;
    document.getElementById("topCenter").innerHTML = XorO;
    toggleXO()
  }
}

function toggleXO() {
  if (XorO == "X") XorO = "O";
  else XorO = "X";
}
<div id="squares">
  <p id="topLeft" class="square" onclick="topLeft()">TopLeft</p>
  <p id="topCenter" class="square" onclick="topCenter()">TopCenter</p>
</div>
tv_dinner
9 августа 2021 в 21:12
1

Спасибо. Совет «прекратить использовать var» очень ценится. Код сработал.

avatar
CharlesEF
9 августа 2021 в 06:04
0

Поскольку XorO является глобальной переменной, вам не нужно ничего возвращать из функций. Но ваша логика мне непонятна. Я собрал небольшой образец, чтобы показать другой способ: 

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>tik-tak-toe</title>
 <style>
  table
  {
   border-collapse: collapse;
  }
  
  table td
  {
   border: 1px solid black;
   height: 20px;
   width: 20px;
  }
 </style>
</head>
<body>
 <table id="myTable">
  <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
 </table>
 <script>
  window.document.querySelectorAll('#myTable td').forEach(e => e.addEventListener("click", clickHandler));
  var XorO = "X";

  function clickHandler()
  {
   // Here, `this` refers to the element the event was hooked on
   this.innerHTML = XorO;
   XorO = (XorO == "X" ? "O" : "X");
  }
 </script>
</body>
</html>

РЕДАКТИРОВАТЬ:

Для этого примера я использовал простую таблицу 3x3. Теперь мне нужно назначить обработчик события клика для каждой из ячеек таблицы td. Есть 2 способа сделать это. 1) Используйте javascript для назначения обработчика событий. 2) Используйте атрибут onclick ячейки td. Мой тег сценария начинается после того, как таблица была определена, в противном случае javascript завершится ошибкой, поскольку таблицы еще нет.

  1. window.document.querySelectorAll('#myTable td') вернет массив всех ячеек таблицы td. .forEach(e => e.addEventListener("click", clickHandler)) зациклит массив и назначит функцию clickHandler каждому событию щелчка td.
  2. td onclick="clickHandler();" это второй способ назначить обработчик событий каждой ячейке td.

Функция clickHandler помещает значение XorO в выбранную ячейку td, а в следующей строке задается новое значение XorO. Я использовал для этого тернарный оператор, короткую версию if/else.

Вы также можете присвоить каждой ячейке td идентификатор, чтобы ваш clickHandler знал, какая ячейка td была нажата. Затем вы можете использовать эти идентификаторы в формулах выигрыша, проигрыша или ничьей.

tv_dinner
9 августа 2021 в 21:15
0

Эй, чувак, я уверен, что это лучший способ сделать это. Хотя для меня это слишком сложно. Я действительно не знаю, что такое jquery, и я не узнаю кучу команд, которые вы использовали. Спасибо за попытку помочь, но это просто вылетело из головы.

CharlesEF
9 августа 2021 в 23:27
0

@tv_dinner: Мой код вообще не использует jQuery. Могу объяснить подробнее, если хотите. В основном я хотел показать вам, что вам не нужно 9 функций, когда вам действительно нужна только 1.

tv_dinner
10 августа 2021 в 03:47
0

Мне интересно узнать, как это работает. Я не узнаю большинство ключевых слов, поэтому быстро теряюсь, пытаясь прочитать.

CharlesEF
10 августа 2021 в 08:33
0

@tv_dinner: См. мою правку выше. Если у вас есть еще вопросы, просто спросите.

avatar
Muhammad Shaker
9 августа 2021 в 05:43
0

Используйте else, если нужно принять два решения

 if (XorO == "X") {
  XorO = "O";
} else if (XorO == "O") {
  XorO = "X";
}