Question

我正在做一个Tic-Tac-Toe游戏。我的问题是我的代码允许重写X或O，即使其中一个方格已经包含X或O.我正在使用if语句写入X或O，具体取决于每次增加1的数字变量。我想添加另一个条件，如果我的标记为空，只允许写入X或O.我该怎么做呢？。注意：只有javascript请，因为我还没有开始学习jQuery。提前一堆谢谢！

JS

var tds = document.querySelectorAll("td");
var player = 1;
var str = "";

for (var i = 0; i < tds.length; i++) {
  tds[i].addEventListener("click", function(){
     if( player % 2 === 0 && tds[i] !== "<td>X</td>"  && tds[i] !==
     "<td>O</td>"){
       this.textContent = "O";
     } else if (player % 2 !== 0 && tds[i] === "" ) {
       this.textContent = "X";
     }
   player++;

  });
}

HTML -

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css.css">
    <title></title>
  </head>
  <body>
    <table>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <script type="text/javascript" src="js.js">

    </script>
  </body>
</html>

Answer 1

您可以检查元素的childNodes属性，该属性返回Nodelist。

如果长度为0，那么您的元素为空。

const elem = document.querySelector("#container")
console.log(elem.childNodes.length)

<div id="container"></div>

虽然换行计为text，但要小心。

Answer 2

您可以使用innerHtml属性来检查元素是否包含任何内容。但是，当您设置html marked时，我更愿意添加课程X or O。然后在你的js中检查元素是否有类marked。使用以下内容在td的点击事件上添加课程

function mark(e)
{
var isMarked = hasClass(e,"marked");
if(!isMarked )
{
e.className+= " marked";
//add X or O
}
else
{
//do something else
}
function hasClass(element, className) {
    return element.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className);
}

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css.css">
    <title></title>
  </head>
  <body>
    <table>
      <tr>
        <td onclick="mark(this)"></td>
       .
       .
        <td></td>
      </tr>
    </table>
    <script type="text/javascript" src="js.js">

    </script>
  </body>
</html>

HasClass参考：http://sonnyt.com/blog/development/javascript-check-if-element-has-class

Answer 3

您可以检查元素的innerHTML属性，以确定它们是否包含任何内容 - 例如X或O。

所以，条件应该是这样的。

if( player % 2 === 0 && tds[i].innerHTML !== "X"  && tds[i].innerHTML !== "O") {

}

Answer 4

请在下面找到工作解决方案。

＆＃13;

var player = 1;
var blocks = document.querySelectorAll('td');
var title = document.getElementById('title');

function switchPlayer(currentPlayer) {
  if (currentPlayer === 1) {
    player = 2;
    title.innerHTML = 'Player: 2(O)'
  } else {
    player = 1;
    title.innerHTML = 'Player: 1(X)'
  }
}

blocks.forEach(function(block) {
  block.addEventListener('click', function() {
    if (!block.innerHTML) {
      if (player === 1) {
        block.innerHTML = 'X';
      } else {
        block.innerHTML = 'O';
      }
      switchPlayer(player)
    }
  })
});

＆＃13;

td {
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

＆＃13;

<h1 id="title">
Player: 1 (X)
</h1>
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

＆＃13;

Answer 5

node.childNodes.length将在您要检查的节点内拾取空格或其他元素，以包括任何空格或格式返回。

例如以下返回3

<td>
  <!-- returns NodeList(3) [text, comment, text] -->
</td>

 将导致1，而  将导致2。

除非您确定自己的数据正确或清理数据源，否则我将使用以下内容测试节点是否为空。

// <div id="SomeElement" />

function isEmpty(node) {
  return node.textContent.trim() === "";
}

isEmpty(SomeElement);

// or

Element.prototype.isEmpty = function() {
  return this.textContent.trim() === "";
}

SomeElement.isEmpty();

function emptyElementNode(node) {
  return node.textContent.trim() === "";
}

var xo = TicTacToe.getElementsByTagName('div');

for (var i = 0; i < xo.length; ++i) {

	if (emptyElementNode(xo[i])) {
    xo[i].classList.add('highlight');
    xo[i].textContent = "⚬";
  }

}

#TicTacToe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 0.063rem;
  width: 6.25rem;
  height: 6.25rem;
  align-items: center;
  justify-items: center;
  margin: -0.063rem;
  overflow: hidden;
}

#TicTacToe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 0.063rem;
  width: 6.25rem;
  height: 6.25rem;
  align-items: center;
  justify-items: center;
  margin: -0.063rem;
  overflow: hidden;
}

#TicTacToe div{
  position: relative;
}

#TicTacToe div::before {
  content: "";
  display: block;
  position: absolute;
  width: calc(6.25rem / 3);
  height: calc(6.25rem / 3);
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: #fff;
  z-index: -1;
  outline: 1px solid #222;
}

#TicTacToe .highlight::before {
  background: #ddd;
}

#TicTacToe div{
  position: relative;
}

#TicTacToe div::before {
  content: "";
  display: block;
  position: absolute;
  width: calc(6.25rem / 3);
  height: calc(6.25rem / 3);
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: #fff;
  z-index: -1;
  outline: 1px solid #222;
}

#TicTacToe .highlight::before {
  background: #ddd;
}

<div id="TicTacToe">
  <div>⚬</div>
  <div>×</div>
  <div>×</div>
  <div>⚬</div>
  <div>⚬</div>
  <div>×</div>
  <div></div>
  <div>×</div>
  <div>⚬</div>
</div>

Answer 6

此方法具有完整的浏览器支持：yourNode.hasChildNodes()

<块引用>

Node.hasChildNodes() 方法返回一个布尔值，指示给定节点是否有子节点。

Documentation

JavaScript - 如何知道元素是否为空？

6 个答案: