В вашем первом l oop: for (var i = 0; i <= action.length - 1; i++) { ... } вы добавляете прослушиватели событий в каждую ячейку. Поскольку переменная gameState инициализируется в 0, условие if (gameState === 0) { ... } всегда будет истинным в этом l oop.
Вместо проверки состояния игры во время инициализации, просто добавьте прослушиватель событий, как и вы, для каждой ячейки.
Чтобы убедиться, что вы передали правильный параметр событию, вам нужно заключить обратный вызов в function() { chasvi(param); }, а все тело l oop внутри другая анонимная функция, устанавливающая другую переменную в координату i:
for (var i = 0; i <= action.length - 1; i++) {
(function(){
let coor = i;
let getClassName = "." + action[i].classList.value;
document.querySelector(getClassName).addEventListener("click", function() { chasvi(coor); });
}());
}
Обратите внимание, что я изменил имя функции на chasvi, поскольку вы можете управлять делом X или O в этой функции.
В каждой из функций chasviX и chasviO вы снова добавляете прослушиватель событий. Это нехорошо, потому что при каждом нажатии вы добавляете еще одно событие.
Перед щелчком уже есть событие.
После одного нажатия есть 2 события. Еще один клик, и есть 3 события, и так далее ...
Я предлагаю вам изменить эти функции на 1 функцию, которая обрабатывает оба случая:
function chasvi(cord)
{
let TextToDisplay;
if (gameState === 0)
{
TextToDisplay = "X";
gameState = 1;
}
else
{
TextToDisplay = "O";
gameState = 0;
}
document.querySelector("." + action[cord].classList.value).textContent = TextToDisplay;
}
Поскольку есть только 2 состояния для gameState, вы можете использовать логическое значение. Вы можете инициализировать его как var gameState = false; Я случайным образом выбираю false для X.
И затем функцию можно упростить до:
function chasvi(cord)
{
let TextToDisplay;
if (gameState === false)
{
TextToDisplay = "X";
}
else
{
TextToDisplay = "O";
}
gameState = !gameState; // This swaps the state true/false
document.querySelector("." + action[cord].classList.value).textContent = TextToDisplay;
}
Этот вид записи:
let TextToDisplay;
if (gameState === false)
{
TextToDisplay = "X";
}
else
{
TextToDisplay = "O";
}
Можно упростить с помощью троичных выражений:
let TextToDisplay = gameState ? "O" : "X"; // This means if gameState is true, then "O" is returned, else "X"
Окончательный код может выглядеть следующим образом:
var action = document.querySelectorAll('td');
var gameState = false;
for (var i = 0; i <= action.length - 1; i++) {
(function(){
let coor = i;
getClassName = "." + action[i].classList.value;
document.querySelector(getClassName).addEventListener("click", function() { chasvi(coor); });
}());
}
function chasvi(cord) {
let TextToDisplay = gameState ? "O" : "X";
gameState = !gameState;
document.querySelector("." + action[cord].classList.value).textContent = TextToDisplay;
}
.main {
padding: 100px 0;
width: 360px;
margin: 0 auto;
}
table, tbody {
margin: 0;
padding: 0;
width: 360px;
height: 360px;
}
tr {
width:360px;
height: 120px;
margin: 0;
padding: 0;
}
td {
text-align: center;
width:120px;
height: 120px;
border: 1px solid #333;
margin: 0;
padding: 0;
font-size: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<table>
<tr>
<td class="b1-1"></td>
<td class="b1-2"></td>
<td class="b1-3"></td>
</tr>
<tr>
<td class="b2-1"></td>
<td class="b2-2"></td>
<td class="b2-3"></td>
</tr>
<tr>
<td class="b3-1"></td>
<td class="b3-2"></td>
<td class="b3-3"></td>
</tr>
</table>
</div>
<script src="script.js" type="text/javascript"></script>
</body>
</html>