querySelectorAll 在 forEach() 循环后只给出网格中一个 div 的输出

Question

最近，我一直在尝试创建一个单词游戏，但有 8 个字母，而且进展顺利，但是，当我将答案输入 div 框时，仅 当我单击“CHECK”大按钮时，第一个 div 得到响应 。我正在尝试使用 forEach() 循环来解决这个问题，但我仍然只有一个 div 来获得输出...有人可以帮我吗？此外，我希望它适用于网格中的多个 div，只是为了澄清。

完整代码：https://code.sololearn.com/WX59M6HHngc5

这是我的 JS 代码：

const pText = document.querySelector("#p123").innerText.toUpperCase()
const button = document.querySelector("#button123")

Array.from(document.querySelectorAll(".amot")).forEach(function(element) {

button.addEventListener("click", () => {
  const text = document.querySelector(".amot").textContent.toUpperCase()

  //don't check if there are numbers/non letters and text length < 8
  if (text.match(/\d/gi) || text.length < 1 || text.match(/[^a-z]/gi)) {
    document.querySelector(".amot").innerText = text
    return
  }

  document.querySelector(".amot").innerHTML = ""
  text.split("").forEach((letter, i) => {
    if (pText.includes(letter) && pText[i] === letter) {
      document.querySelector(".amot").innerHTML += `<span style="color: lime">${letter}</span>`
    } else if (pText.includes(letter)){
      document.querySelector(".amot").innerHTML += `<span style="color: orange">${letter}</span>`
    } else {
      document.querySelector(".amot").innerHTML += `<span style="color: lightgrey">${letter}</span>`
    }
  })
})

//blur the div if text is longer than 8 letters or key = "space"
document.querySelector(".amot").addEventListener("keydown", (e) => {
  if (document.querySelector(".amot").innerText.length > 0 || e.keyCode == 32) {
    document.querySelector(".amot").blur()
  }
})

//clear on focus
document.querySelector(".amot").addEventListener("focus", () => {
  document.querySelector(".amot").innerHTML = ""
})},

这是我的一些 HTML 代码（其余代码可以在底部的 link 中找到）：

<p id = "p123">ABsOLUTE</p>
<div id = "div123" contenteditable="true" style="border: 5px solid; padding: 5px; font-size: 22px; font-weight: bold; text-transform: uppercase;" spellcheck="false"></div>
<button id = "button123">check</button>
<div id = "amoo">
<div class="container" style = "position:relative; left:825px; top:-400px;" id = "testu">



    <div oninput = "inputFunc()" tabindex = "1" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo1"></div>
    <div oninput = "inputFunc()" tabindex = "2" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo2"></div>
    <div oninput = "inputFunc()" tabindex = "3" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo3"></div>
    <div oninput = "inputFunc()" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo4"></div>
    <div oninput = "inputFunc()" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo5"></div>
    <div oninput = "inputFunc()" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo6"></div>
    <div oninput = "inputFunc()" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo7"></div>
    <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo8"></div>
    <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo9"></div>
    <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo10"></div>
    <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo11"></div>
    <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo12"></div>
    
</div>

这是我的完整代码：https://code.sololearn.com/WX59M6HHngc5 请帮我！提前谢谢你...

Answer 1

简答：将 document.querySelector(".amot") 替换为 element

解释：

注意 forEach 回调函数中的 element 参数

问题是在 forEach 循环中您使用的是语法

Array.from(document.querySelectorAll(".amot")).forEach(function(element) {
  document.querySelector(".amot").doStuff()
}

这意味着对于每次迭代，您都在查询第一个 .amot 元素并对其进行处理，而其余元素保持不变。相反，你应该

Array.from(document.querySelectorAll(".amot")).forEach(function(element) {
  element.doStuff()
}

这样，您就可以为 document.querySelectorAll(".amot")

中的每个元素应用逻辑

querySelectorAll 在 forEach() 循环后只给出网格中一个 div 的输出

querySelectorAll only gives output for one div in grid after forEach() loop

html

javascript

contenteditable

wordle-game

queryselector