СВОЙСТВА и МЕТОДЫ
Length свойство, устанавливает или возвращает количество элементов в массиве
Нестандартное свойство innerText. Всеми браузерами, кроме Firefox 44- (согласно CanIUse.Com), поддерживается нестандартное свойство innerText.
У него, в некотором роде, преимущество перед textContent в том, что оно по названию напоминает innerHTML, его проще запомнить.
Однако, свойство innerText не следует использовать, так как оно не стандартное и не будет стандартным.
Это свойство возвращает текст не в том виде, в котором он в DOM, а в том, в котором он виден – как если бы мы выбрали содержимое элемента мышкой и скопировали его. В частности, если элемент невидим, то его текст возвращён не будет. Это довольно странная особенность существует по историческим причинам и скорее мешает, чем помогает.
Впрочем, при записи значения innerText работает так же, как и textContent.
Метод querySelectorAll ( ) возвращает все элементы в документе , который соответствует заданному селектор (ы) CSS , как статический объект NodeList .
Объект NodeList представляет коллекцию узлов . Узлам могут быть доступны номера индексов . Индекс начинается с 0 .
КОД
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.cell { width: 50px; height: 50px; display: inline-block; border: 1px solid black; font-size: 50px; margin: 4px; padding: 0px; }
</style>
</head>
<body>
<div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div> <div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div> <div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div>
<script>
(function (d){ player = true;
function clsCells(arr) {
for(var i = 0, len = arr.length;i < len; i++) {
arr[i].innerText = ""};
};
d.onclick = function (e) {
if ((e.target.className == "cell") && (e.target.innerText == "")) {
if (player){ e.target.innerText = "X"; player = false; }
else { e.target.innerText = "O"; player = true; }
var arr = d.querySelectorAll('.cell'), v = [];
for(var i = 0, len = arr.length;i < len; i++) {
v[i] = arr[i].innerText };
if ((v[0] == "X" && v[1] == "X" && v[2] == "X") || (v[3] == "X" && v[4] == "X" && v[5] == "X") || (v[6] == "X" && v[7] == "X" && v[8] == "X") || (v[0] == "X" && v[3] == "X" && v[6] == "X") || (v[1] == "X" && v[4] == "X" && v[7] == "X") || (v[2] == "X" && v[5] == "X" && v[8] == "X") || (v[0] == "X" && v[4] == "X" && v[8] == "X") || (v[2] == "X" && v[4] == "X" && v[6] == "X")) {alert("X wins!"); clsCells(arr);} if ((v[0] == "O" && v[1] == "O" && v[2] == "O") || (v[3] == "O" && v[4] == "O" && v[5] == "O") || (v[6] == "O" && v[7] == "O" && v[8] == "O") || (v[0] == "O" && v[3] == "O" && v[6] == "O") || (v[1] == "O" && v[4] == "O" && v[7] == "O") || (v[2] == "O" && v[5] == "O" && v[8] == "O") || (v[0] == "O" && v[4] == "O" && v[8] == "O") || (v[2] == "O" && v[4] == "O" && v[6] == "O")) {alert("O wins!"); clsCells(arr);} }
};
})
(document);
</script>
</body>
</html>