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

标签 javascript html dom

我正在制作井字游戏。我的问题是,即使其中一个方 block 已经包含 X 或 O,我的代码也允许重写 X 或 O。我使用 if 语句来编写 X 或 O,具体取决于每次增加一的数字变量。我想添加另一个条件,如果我的标签为空,则只允许写入 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>

最佳答案

您可以查看 childNodes 元素的属性,返回 Nodelist .

如果它的长度为 0,那么你的元素是空的。

const elem = document.querySelector("#container")
console.log(elem.childNodes.length)
<div id="container"></div>


小心换行算text尽管。

关于JavaScript - 如何知道元素是否为空?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47447796/

相关文章:

javascript - 通过js把li类改成链接

javascript - 如何为图标创建事件监听器?

javascript - 如何停止时间激活的功能

javascript - 在 Angular2 中导入接口(interface)

javascript - 我在 Node.js 异步函数中收到 Promise { <pending> }

javascript - 如何将滚动条添加到 HTML5 Canvas 中的矩形?

html - <col> 元素边框通过 CSS 不起作用

php - 使用jquery刷新div中的信息

jquery - 在 jquery 中创建元素并将它们附加到 dom 的最佳方法是什么?

javascript - 如何使 jquery "$.post"请求同步