使用arr.every()检测HTMLCollection转数组元素填满状态异常

你的核心问题是**checkBoxes变量只在页面初始化时计算了一次**，之后点击填充盒子时没有重新检测盒子状态，导致它的值永远是初始的false。

修复步骤 #

把盒子状态的检测逻辑移到checkBoard函数内部，这样每次调用checkBoard时都会重新检查当前所有盒子的填充情况：

function checkBoard() {
  // 每次调用时重新检测所有盒子是否非空
  const allFilled = boxesArr.every(box => box.innerHTML.trim() !== "");
  if (allFilled) {
    console.log("All Filled");
  }
}

详细解释 #

1. 你原来的代码中，checkBoxes在页面加载时就执行了every检测，此时所有盒子的innerHTML都是空的，所以checkBoxes被赋值为false，之后这个变量再也没有被更新过。
2. 将检测逻辑放到checkBoard内部后，每次点击盒子填充内容后调用checkBoard，都会重新遍历所有盒子，判断它们当前的innerHTML是否非空。
3. 加上trim()是为了避免盒子中存在空格、换行等空白字符时，误判为未填充的情况（虽然你的代码中填充的是"X"，但这是更健壮的写法）。

修复后的完整JavaScript代码 #

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

function checkBoard() {
  const allFilled = boxesArr.every(box => box.innerHTML.trim() !== "");
  if (allFilled) {
    console.log("All Filled");
  }
}

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

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

这样修改后，当所有盒子都被点击填充"X"后，checkBoard就会正确输出"All Filled"。

内容的提问来源于stack exchange，提问作者Iyo