javascript 在[... HTMLAcovery]上使用arr.every()不会返回真的元素更改

8mmmxcuj 于 2023-02-21 发布在 Java

关注(0)|答案(2)|浏览(91)

我正在尝试构建一个井字游戏，因此我尝试在使用spread运算符将集合转换为数组之前先使用getElementsByClassName()将游戏框区域收集到一个数组中。但是当我尝试使用arr.every()方法检查是否已玩过所有框时，即使已填充所有框，我仍然得到false
这是我的HTML代码

<div class="board">
  <div class="board-sections">
    <div class="play-box"></div>
    <div class="play-box"></div>
    <div class="play-box"></div>
    <div class="play-box"></div>
    <div class="play-box"></div>
    <div class="play-box"></div>
    <div class="play-box"></div>
    <div class="play-box"></div>
    <div class="play-box"></div>
   </div>
</div>

首先我收集了所有的玩具盒。

let boxes = document.getElementsByClassName("play-box");
let numOfBoxes = boxes.length;

然后，我将集合转换为数组，并应用条件检查是否所有框都不为空

let boxesArr = [...boxes];
let checkBoxes = boxesArr.every(function(box) {
  return box.innerHTML !== "";
});

然后我创建了一个函数来检查是否所有框都不为空

function checkBoard() {
  if (checkBoxes) {
    console.log("All Filled");
  }
}

然后，我创建了一个函数，通过调用checkBoard（）函数onclick来向每个框添加文本并检查是否所有框都已填充。

for (var i = 0; i < numOfBoxes; i++) {
  boxes[i].addEventListener("click", addChip);
}

addChip()函数在单击每个框时向其添加文本，然后检查是否所有框都已填充

function addChip() {
  this.innerHTML = "X";
  checkBoard();
}

这些框在被单击时被填充，我希望checkBoard()函数在所有框都被填充后返回true，但是在所有框都被填充后，checkBoard()函数仍然返回false.
下面是完整的代码

let boxes = document.getElementsByClassName("play-box");
let numOfBoxes = boxes.length;

let boxesArr = [...boxes];
let checkBoxes = boxesArr.every(function(box) {
  return box.innerHTML !== "";
});

function checkBoard() {
  if (checkBoxes) {
    console.log("All Filled");
  }
}

for (var i = 0; i < numOfBoxes; i++) {
  boxes[i].addEventListener("click", addChip);
}

function addChip() {
  this.innerHTML = "X";
  checkBoard();
}

.board {
  text-align: center;
  max-width: 100%;
  width: 500px;
  margin: auto;
}

.board-sections {
  display: grid;
  grid-template-columns: auto auto auto;
  background: #ccc;
  gap: 5px;
  align-content: center;
}

.play-box {
  height: 100px;
  background: transparent;
  border: 1px solid #000;
  min-width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="board">
  <div class="board-sections">
    <div class="play-box"></div>
    <div class="play-box"></div>
    <div class="play-box"></div>
    <div class="play-box"></div>
    <div class="play-box"></div>
    <div class="play-box"></div>
    <div class="play-box"></div>
    <div class="play-box"></div>
    <div class="play-box"></div>
  </div>
</div>

JavaScript

来源：https://stackoverflow.com/questions/75503448/using-arr-every-on-htmlcollection-doesnt-return-true-element-change

2条答案

按热度按时间

rt4zxlrg1#

没有实际的代码很难回答你的问题。下面我组装了一个可能的场景，实际工作。也许它对你有帮助？

const pb=[...document.querySelectorAll(".play-box")];
document.querySelectorAll("button").forEach(b=>{
 b.addEventListener("click",ev=>{
  if(b.textContent=="check")
   console.log(pb.every(p=>p.textContent!=""))
  else
   pb.forEach(p=>p.textContent="X");
 })
})

.play-box {display:inline-block; width:40px;height:40px; border:1px solid grey}

<div class="board">
  <div class="board-sections">
<div class="play-box"></div>
<div class="play-box"></div>
<div class="play-box"></div><br>
<div class="play-box"></div>
<div class="play-box"></div>
<div class="play-box"></div><br>
<div class="play-box"></div>
<div class="play-box"></div>
<div class="play-box"></div>
   </div>
</div>
<button>check</button> <button>fill</button>

我想说的是，.play-box元素的.textContent必须在它们被填充 * 之后 * 进行检查，OP的原始脚本只在页面加载之后直接进行了一次检查。

- 说明：**

上面代码片段中的关键部分是表达式

pb.every(p=>p.textContent!="")

如果所有的框都以某种方式填充，它返回true。在井字游戏中，这需要在每次设置"X"或"O"后执行。
您的checkBoard函数应如下所示：

function checkBoard() {
  if (boxesArr.every(p=>p.textContent!="")) {
    console.log("All Filled");
  }
}

赞(0）回复(0）举报 2023-02-21

vecaoik12#

checkBoxes保存的是布尔值，而不是函数：

// This is wrong
let checkBoxes = boxesArr.every(function(box) {
  return box.innerHTML !== "";
});

它只会返回游戏开始前的状态值。你不能在游戏过程中像if (checkBoxes)一样重复使用它，并期望一个更新的值。
相反，可以像if (checkBoxes()) {那样使用返回布尔值的函数：
x一个一个一个一个x一个一个二个一个x一个一个三个一个
此外，使用textContent返回 * text *，而不是innerHTML
此外，您还可以简化代码以：

const boxes = document.querySelectorAll(".board-box");
const tot = boxes.length;
let turn = 0;

const isBoxEmpty = (box) => box.textContent.trim() === "";

const checkBoard = () => {
  if (![...boxes].some(isBoxEmpty)) {
    console.log("All Filled");
  }
};

const addChip = (ev) => {
  const box = ev.currentTarget;
  if (!isBoxEmpty(box)) return; // Not an empty box. Exit function here.
  
  box.textContent = (turn % 2) ? "O" : "X";
  checkBoard();
  // Increment turn
  turn += 1;
}

boxes.forEach((box) => box.addEventListener("click", addChip));

.board {
  font: 14vmin/1 sans-serif;
  margin: auto;
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.board-box {
  height: 20vmin;
  aspect-ratio: 1;
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

<div class="board">
  <div class="board-box"></div>
  <div class="board-box"></div>
  <div class="board-box"></div>
  <div class="board-box"></div>
  <div class="board-box"></div>
  <div class="board-box"></div>
  <div class="board-box"></div>
  <div class="board-box"></div>
  <div class="board-box"></div>
</div>

赞(0）回复(0）举报 2023-02-21

我来回答

javascript 在[... HTMLAcovery]上使用arr.every()不会返回真的元素更改

2条答案

相关问题

热门标签

最新问答