Recently, I have been trying to create a wordle game but with 8 letters, and it has been going well, though, when I input my answer into the div boxes, only the first div gets a response when I click the big "CHECK" button. I am attempting to use a forEach() loop to solve this problem but I am still only getting one div to get an output... could someone please help me? Also, I want it to work for the multiple divs in the grid, just for clarification.
Full code: https://code.sololearn.com/WX59M6HHngc5
Here is my JS code:
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 = ""
})},
Here is some of my HTML code (The rest can be found at the link at the bottom):
<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 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>
Here is my full code: https://code.sololearn.com/WX59M6HHngc5 Please help me! Thank you in advance...
CodePudding user response:
Short answer: replace document.querySelector(".amot")
with element
Explanation:
Notice the element
param inside the forEach callback function
The problem is that inside the forEach loop you are using the syntax
Array.from(document.querySelectorAll(".amot")).forEach(function(element) {
document.querySelector(".amot").doStuff()
}
This means that for every iteration, you are querying the first .amot
element and doing stuff to it, while the rest remain intact. Instead, you should
Array.from(document.querySelectorAll(".amot")).forEach(function(element) {
element.doStuff()
}
This way, you are applying the logic for every element in document.querySelectorAll(".amot")